How can I force a webpage page to render at a minimum resolution, regardless of how small the viewport shrinks?

Question

I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute.

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

Ideally, The element would continue to float at the bottom of the browser at normal and large sizes, but if the browser window were to be shrunk too small, the browser would force a scrollbar, instead of moving the floating element any further.

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

Answer 1

You could set html, body { min-width: 800px; min-height: 600px; }

YMMV in different browsers though.

Answer 2

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

I think some javascript might be easier to manage than a css solution. Keep in mind that min-width and min-height don't work in all browsers.

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

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

Then I can set the size of a div in my page based on the window size. $('div#mydiv').css('width',ww); You can also set the value to auto to unset your specified value.

Answer 3

I know it is a bit of a cheat but you can use the old trick of putting in an image that is of the required minimum width in the floating element, and the same colour as it. It is then effectively invisible, but prevents the element, and therefore the whole page, from shrinking.