How to keep a constant in size as the user zooms in and out on the page?

Question

Is there an html / css / javascipt way to maintain a <div> at a constant size in the face of the user's zooming the page in and out? That is, using control-plus to increase text size and control-minus to reduce it.

EDIT: The kicker, I guess, is that I want the content of the <div> to stay the same size, too.

Thanks!

EDIT: My goal was (and is) to keep an AdSense <div> from expanding so much as to obscure a lot of the real content on the page. But come to find out (thank you @thirtydot) there's really no good way to do this. The answer, for me (thank you @Neal!): give the <div> overflow:scroll so as to sacrifice its content rather than the content I'm trying to show.

Answer 1

.box {
    background: red;
    width: 5vw;
    height: 10vh;
    position: absolute;
    top: 10vh;
    left: 5vw;
}

<div class="box"></div>

Answer 2

To make the div size invariant of zooming (But not contents inside it) do the following :
Inside your css for that div :

min-width: 100%;
max-width: 100%;

This will freeze the width, you can do the same for height too.

Answer 3

I am not sure what you mean, just use css:

div#id {
    width: 100px; /*or some other #*/
    height: 100px; /*or some other #*/
}

html:

<div id="id">some content</div>

Answer 4

There is no good way (read: reliable) to do this. Sorry.

What you're asking for basically boils down to detecting the zoom level of the browser, and there's a great answer here (confirming just how difficult this is):

• How to detect page zoom level in all modern browsers?

As stated in that answer, there is a "kinda" cross-browser crazy way involving the use of Flash, but there are downsides:

• It uses Flash.
• It's not reliable if the user loads your page already zoomed in.
• It uses Flash. Yes, this is so bad that I said it twice. Think of all those iPhones/iPads.

Anyway, it's here:
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/

Answer 5

I read in another post a solution that I didn't test yet...

Maintain div size (relative to screen) despite browser zoom level

that's the used javascript:

//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.) 

function flaotingDiv(){

    //How much the screen has been zoomed.
    var zoomLevel = ((screen.width)/(window.innerWidth));
    //By what factor we must scale the div for it to look the same.
    var inverseZoom = ((window.innerWidth)/(screen.width));
    //The div whose size we want to remain constant.
    var h = document.getElementById("fontSizeDiv");

    //This ensures that the div stays at the top of the screen at all times. For some reason, the top value is affected by the zoom level of the Div. So we need to multiple the top value by the zoom level for it to adjust to the zoom. 
    h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px";

    //This ensures that the window stays on the right side of the screen at all times. Once again, we multiply by the zoom level so that the div's padding scales up.
    h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px";

    //Finally, we shrink the div on a scale of inverseZoom.
    h.style.zoom = inverseZoom;

}

//We want the div to readjust every time there is a scroll event:
window.onscroll = flaotingDiv;

Answer 6

You should just be ablemto set a width and height in css using a px measurement

Eg

div
{
width:100px; height:200px;
}