非常简单的CSS最小高度100％带有边距的问题

Question

I'm looking for suggestions how to set a div to min-height:100% when it has a 15px margin-top? 我在寻找建议，当它的顶部边距为15px时，如何将div设置为min-height：100％？ 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. 我想要的是让div触摸屏幕底部（不触发滚动条），但是当内容太大而无法容纳时，它会自动扩展到屏幕限制以下，从而触发滚动条。 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>

Answer 1

您可以使用以下CSS将div固定到底部

#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}

Answer 2

I found a solution: Use the new CSS3 box-sizing rule on body and set it to padding-top:15px; 我找到了一种解决方案：在主体上使用新的CSS3 框大小调整规则，并将其设置为padding-top：15px; remove the margin-top on #main and it works exactly as described above in all new browsers. 删除#main上的margin-top，它的工作原理与上述所有新浏览器中的描述完全相同。

非常简单的CSS最小高度100％带有边距的问题

问题描述

2 个解决方案

解决方案1
0 2012-01-15 20:07:58

解决方案2
0 已采纳 2012-01-16 13:25:00

非常简单的CSS最小高度100％带有边距的问题

问题描述

2 个解决方案

解决方案1 0 2012-01-15 20:07:58

解决方案2 0 已采纳 2012-01-16 13:25:00

解决方案1
0 2012-01-15 20:07:58

解决方案2
0 已采纳 2012-01-16 13:25:00