Menu
live (work in progress) site
Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%; for html, body, and #main however the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?
506
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.
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
see this jsfiddle
html, body {height: 100%;}
.container {min-height: 100%;}
discussing this over here too.....
proper css to ensure that the body element fills the entire screen
155
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
