Menu
I don't get my first child in the body to 100% height, if the body has min-height specified.
<html>
<head>
<style>
html {
height:100%;
}
body {
min-height:100%;
}
#wrapper {
height:100%;
min-width:1120px; /* 250px each side (content width is 870px) */
max-width:2000px;
background-image:url(bg.png);
background-position:50% 25px;
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- web content -->
</div>
</body>
</html>
This does not resize the wrapper to the height of the window. When I remove the min- and use height, it'll work. But I have to have the content height variable...
I did find some other posts here on SO and on google, but they have just questions and no solution.
513
Use height:100vh; for divs you want to stretch and fill the screen.
Do not set body's height: 100%; It will break your entire site if you have pages that have more than 100% in content height. They won't be able to scroll.
If you want a few pages of your website to fill the entire screen while still allowing other pages to scroll (because they have more than 100% height in content), you need to set the div height to 100%, not the entire site-wide body height.
Use this as general site-wide css:
html {
height: 100%;
}
body {
min-height: 100%;
}
Then set specific divs to fill the entire screen (when they have less than 100% height in content):
/* Set any div heights to 100% of the screen height*/
.div {
height:100vh;
}
Explanation of the vh measurement: https://stackoverflow.com/a/16837667/4975772
68
I actually found a solution!
Now I have:
html, body {
height:100%;
}
So my body is not min-height. I don't remember why I changed it to min-height, but I hope I won't face the issue I obviously faced some time ago...
33
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