Very simple CSS minimum height 100% issue with margin
Question
I'm looking for suggestions how to set a div to min-height:100% when it has a 15px margin-top? What I want is for the div to touch the bottom of the screen (without triggering scrollbars), however when the content is too large to fit, it automatically expands below the screen limit, triggering scrollbars. Here's what Ive got so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body, html{height:100%; margin:0;}
body{background:#AAA}
#main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
</style>
</head>
<body>
<div id="main">
try duplicating this content until it does not fit in the box
</div>
</body>
</html>
2 answers
solution1
0 2012-01-15 20:07:58
您可以使用以下CSS将div固定到底部
#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
solution2
0 ACCPTED 2012-01-16 13:25:00
I found a solution: Use the new CSS3 box-sizing rule on body and set it to padding-top:15px; remove the margin-top on #main and it works exactly as described above in all new browsers.
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.