I have a couple of problems with my container DIV. For one it is not recognising the height of my content correctly (I would have thought it would extend beyond the bottom of the main content and sidebar, but it isn't). You can see what I mean on this page.
I would also like the container DIV to always fill the available height of the screen/window. I have tried setting it to min-height:100%, but this didn't have any effect.
Here is the CSS I am using for the container DIV:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
min-height: 100%;
}
I would be grateful for any help to get this working.
Thanks,
Nick
You can net set it to view height
html, body
{
height: 100vh;
}
html {
min-height: 100%;
}
body {
min-height: 100vh;
}
The html height (%) will take care of the height of the documents that's height is more than a 100% of the screen view while the body view height (vh) will take care of the document's height that is less than the height of the screen view.
Did you set the CSS:
html, body
{
height: 100%;
}
You need this to be able to make the div take up all the space. :)
I've been thinking over this and experimenting with height of the elements: html, body and div. Finally I came up with the code:
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="utf-8" />_x000D_
<title>Height question</title>_x000D_
<style>_x000D_
html {height: 50%; border: solid red 3px; }_x000D_
body {height: 70vh; border: solid green 3px; padding: 12pt; }_x000D_
div {height: 90vh; border: solid blue 3px; padding: 24pt; }_x000D_
_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div id="container">_x000D_
<p><html> is red</p>_x000D_
<p><body> is green</p>_x000D_
<p><div> is blue</p>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>With my browser (Firefox 65@mint 64), all three elements are of 1) different height, 2) every one is longer, than the previous (html is 50%, body is 70vh, and div 90vh). I also checked the styles without the height with respect to the html and body tags. Worked fine, too.
About CSS units: w3schools: CSS units
A note about the viewport: " Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm."
Source: Stackoverflow.com