Menu
I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
body { height: 100px } and .container { height: 100px } or .container { height: 100% }, it becomes visible, but what I need is it to be is full height rather than a height in pixels.body { height: 100% } the photo and footer divs are not visible again.What do I need to do to get it 100% in height so that my photo and footer divs are full height?
409
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
By default, both the html element and body element have their height CSS property set to auto. This means they don't have an explicit height out of the box. They'll either take up whatever height they are told to be, or they will take up whatever height of the content that is inside them.
Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.
So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content { height: 100%; padding: 10px; margin: 0; background-color: rgba(255,0,0,.1); box-sizing: border-box; }<div class="outer"> <div class="inner"> <div class="content"> Content </div> </div> </div>This wouldn't work, if I didn't give 100% height to—say html element:
body, .outer, .inner, .content { height: 100%; padding: 10px; margin: 0; background-color: rgba(255,0,0,.1); box-sizing: border-box; }<div class="outer"> <div class="inner"> <div class="content"> Content </div> </div> </div>… or .inner
html, body, .outer, .content { height: 100%; padding: 10px; margin: 0; background-color: rgba(255,0,0,.1); box-sizing: border-box; }<div class="outer"> <div class="inner"> <div class="content"> Content </div> </div> </div>Indeed, to make it work do as follow:
<!DOCTYPE html> <html> <head> <title>Vertical Scrolling Demo</title> <style> html, body { width: 100%; height: 100%; background: white; margin:0; padding:0; } .page { min-height: 100%; width: 100%; } </style> </head> <body> <div id="nav" class="page"> <ul> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div id="page1" class="page"> <h1><a name="about">about</a></h1> About page content goes here. </div> <div id="page2" class="page"> <h1><a name="portfolio">portfolio</a></h1> Portfolio page content goes here. </div> <div id="page3" class="page"> <h1><a name="contact">contact</a></h1> Contact page content goes here. </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
