Clever Geek Handbook

How do I get the page of a webpage to display at its minimum resolution, no matter how much the viewport is reduced?

I'm new to complex CSS and my question is: I have a page that positions a floating element at the bottom of the page. It does this by setting Bottom: 0 and Position: Absolute.

When the user resizes their browser to a very small size, this element obscures other content on the page.

Ideally, the element will continue to float to the bottom of the browser at normal and large sizes, but if the browser window needs to be reduced too small, the browser will force the scrollbar instead of moving the floated element further.

Basically I want to tell the browser. No matter how small the window is, never render a page smaller than 800x600.

+1


source to share


3 answers


You can install html, body { min-width: 800px; min-height: 600px; }



YMMV in different browsers.

+1


source


It really depends on whether the floating footer should always be visible or if it can scroll from the bottom when the browser window is small.

I think some javascript might be easier to manage than a css solution. Be aware that min-width and min-height do not work in all browsers.

You can use jquery to make this easier. $ (window) .resize (callback) can be used to set a callback function to handle window resizing.



I also use window sizing as part of my resizing code. var wh = Math.max (600, $ (window) .height ()); var ww = Math.max (800, $ (window) .width ());

Then I can set the size of the div on my page based on the size of the window. $ ('# DIV mydiv') CSS ('width', ww). You can also set the parameter to auto to override the specified value.

0


source


I know this is a bit of a trickery, but you can use the old trick to position the minimum width image in the float and the same color as it. It then becomes invisible, but prevents the element and therefore the entire page from shrinking.

0


source






More articles:


All Articles