Menu
I want to make my <html> and <body> tags be the entire height of the viewport if the page isn't tall enough to warrant scrolling, or the entire height of the web page if it does.
At the moment I'm using this CSS:
html, body {
height: 100%;
}
Which works a treat if the web page isn't tall enough for the user to scroll, however on a long webpage it only goes to the height of the viewport on the users browser. I also tried:
html, body {
min-height: 100%;
}
but that just seems to have the same effect as having no height declaration at all.
790
Have you tried:
min-height: 100vh;
That should set the height of the elements to the viewport and if they go beyond, it will have a scrollbar, here is an example:
http://codepen.io/r3plica/pen/jBaPYB
200
It sounds like your goal is for the body to
if that's the 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%;
}
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
