Menu
Ok so I know this topic has many questions, but I still haven't been able to figure exactly how to make this work. This is close to the problem, but its not working for me.
I want my page to have 100% height. Inside this page is a static header of height 40px, and then content that takes the remaining height (100% - 40px).
HTML:
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
CSS:
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
}
#header
{
height: 40px;
}
#content
{
height: 100%;
position: absolute;
top: 0;
padding-top: 40px;
}
This is an explanation of the code:
I added position: absolute to content because otherwise it would not take up 100% of its container #page for some reason
Then the problem was that it exceeds the boundaries of the page, which is why I added top: 0.
Then the contents of #content overlaps with the header so I added padding-top: 40px
Now the #content exceeds the boundaries of the page again
Any suggestions? Thanks.
252
This should work:
http://jsfiddle.net/94JNZ/1/
#content
{
height: auto;
width: 100%;
position: absolute;
top: 40px;
bottom: 0;
}
You can use box-sizing property for this
Check this:
Another simple & best solution
Check this:
29
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
