I think we need to find a solid solution for this problem - on the internet, there does not seem to be one.
The DIV will always stay the height of its content - and not more.
The structure is like this:
<html>
<head>
<title>myPage</title>
</head>
<body>
<div id='container'>
Some Content...
</div>
</body>
</html>
CSS usually looks like this:
body {
height: 100%;
}
div#container {
height: 100%;
width: 100%;
}
There are already tricks with setting margin or/and padding on body or/and div, but nothing seems to work really fine.
Is there a one and only solution for this problem?
html, body, div#container{
min-height: 100%;
height: 100%;
}
May be this will help?
Try this:
html, body { height: 100%; margin: 0; padding:0; }
#container { height: auto; min-height:100%; background:#ccc; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.