Best IT Recipes

Fullscreen CSS with minimal size

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

structure

Footer navigation scrolls horizontally to display two different screens. The contents of the screen are fixed in height and vertically centered, and the layout always fills the entire window.

Since my content has a fixed height, I need the browser to display a vertical scroll bar when the window reaches a certain height.

I also have several position:fixed <canvas> overlays that are cropped by <html> and <body> elements that are set to height:100%; width:100% height:100%; width:100% .

I was hoping that by setting min-height:700px to the <body> selector, I could get a scroll bar to appear when the window got too short. This does not seem to work.

How can I make this website full-screen in general, but scroll below the minimum threshold?

0
html css
Dec 18 '11 at 9:59 a.m.
source share
2 answers

Well, this should make sure that the body always at least 700 pixels. However, position: fixed will still snap them to the bottom of the viewport, so you will essentially only scroll the background. I believe you want the header / footer headers and footers so that you can always see the full content between them?

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

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

0
Dec 18 '11 at 10:19
source share

Try the following: overflow-x: auto;

He will try to place a horizontal scrollbar when the contents exceed the size of his container.

0
Dec 19 '11 at 6:14
source share


More articles:


All Articles