How to keep a <div> 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.

Solution 1

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/

Solution 2

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

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

Solution 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>

Solution 4

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.

View more solutions

Comments

[Pete Wilson]

I hope I'm wrong but browsers seem to resize all content, including pixel-dimensioned content. Not just pixel-dimensioned, but any-absolute-measure-dimensioned. Please make my hopes come true -- tell me I'm wrong!

[Naftali]

@Pete, browsers only resize content when the content inside is bigger than what is given. you can add overflow: hidden to the css to hide anything that would be outside the boundary

[james6848]

@Pete - You mean that when the user zooms the browser window, you want an element to remain the same absolute size?

[Pete Wilson]

@james6848 -- yes, that's what I mean. Gosh dang it, I should have said 'zoom' instead of 'resize.' I'll edit that right now.

[Pete Wilson]

thanks. I did read those pages -- I don't need another nightmare.

[corn on the cob]

If anyone wants a reason why it works, it is because when the user zooms, the viewport width goes down, and the content size goes up. This means that, in this case, it all stays the same, and they all live happily ever after the end.