I am facing an issue with creating a full-height website using Twitter because the body min-height set to 100% seems to be causing problems.
Here is my CSS code:
html{
height:100%;
}
body{
min-height:100%
}
#main{
min-height:100%;
}
And here is my HTML code:
<html>
<head>
...
</head>
<body>
<div id="main" class="container">
...
</div>
</body>
</html>
I want the #main div to always have the same height as the browser, regardless of content. If the content is smaller, the div should match browser height, but if the content is bigger, the div should extend beyond browser height.
However, with my current code, the #main div takes the height of the content and does not adjust based on the browser size when the content is small.
Why is this happening?