Geek Answers Handbook

Creation of html and body stretch up to 100% height and more if page scrolls

I want my <html> and <body> tags to be the entire height of the viewport if the page is not tall enough to guarantee scrolling or the entire height of the webpage, if there is one.

I am currently using this CSS:

 html, body { height: 100%; }

What works if the webpage is not high enough to scroll the user, however on a long webpage it will only move to the height of the viewport in the users browser. I also tried:

 html, body { min-height: 100%; }

but this looks like the same effect as without a height declaration.

+4
html css
source share
6 answers

It looks like your goal is to body

  • always covers the screen (with minimal or missing content)
  • be able to stretch (if there is a ton of content)

if in this case the following snippet should help

 /* this looks like it should work html, body{ min-height: 100%; } but this ↓ does the trick */ html, body{ padding: 0; margin: 0; } html{ height: 100%; } body{ min-height: 100%; }
+4
source share

You tried:

 min-height: 100vh;

This should set the height of the elements in the viewport, and if they go beyond, it will have a scroll bar, here is an example:

http://codepen.io/r3plica/pen/jBaPYB

+2
source share

Starting point:

 body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; }

(or add a container div with an identifier, etc. if you have problems with some browsers.)

EDIT: Adding a complete code example below:

 <body> <aside>Sidebar</aside> <div id="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body>

CSS

 * { font-size: 2em } aside { position: absolute; top: 0; left: 0; bottom: 0; width: 200px; background-color: pink; } #main { position: absolute; top: 0; left: 200px; right: 0; bottom: 0; overflow: auto; background-color: red; }
+1
source share
 html { height: 100%; } body { max-height: 100%; }

using max-height in the body element will wrap the content within the visible size of the page and remove the scroll or extra spaces.

0
source share
 html, body { height: 100%; } div { min-height: 100%; }

This solution is for creating html and body stretch up to 100% height and more if the page scrolls

0
source share

You need to specify the overflow attribute for the specific div. He will make sure that your content is shown even when scrolling the page or content.

 div { overflow:scroll; }
-one
source share

More articles:


All Articles