Full screen CSS with minimum size

0
votes

I have created a layout in CSS/HTML with the following structure:

structure

Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.

Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.

I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.

I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.

How can I make this website generally full-screen but scroll when below a minimum size threshold?

2
htmlcss

2 Answers

0
votes

Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?

So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/

It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.

0
votes

Try this: overflow-x: auto;

It will try to put a horizontal scroll bar once the content exceeded the size of its container.