如果有margin-top，则将div的高度拉伸到页面末尾

Posted 2023-03-06

【中文标题】如果有margin-top，则将div的高度拉伸到页面末尾

【英文标题】：Stretch height of div until the end of the page if there is margin-top

【发布时间】：2014-08-26 10:47:40

【问题描述】：

我有以下代码：

#content    
            left: 50%;
            margin-left: -498px;
            margin-top: 186px;
            width: 984px;
            min-height: 100%;
            background-color: rgba(255, 255, 255, 0.875);
            font-size: 16px;
            position: absolute;
            z-index:2;
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 8px;
            padding-top: 8px;
            font-family: calibri, sans-serif;
            

我用 min-height: 100%; 制作 div 直到结束，这当然有效。但我也有一个标题图片和一个菜单，所以我写了 margin-top: 186px; 但是现在它会被拉长一点，直到最后（所以我总是有可能滚动，即使它不需要）

所以基本上div的高度应该是：100% - 186px

谢谢！

【参考方案1】：

使用 css 中的 calc 属性来做你写的事情：

height: calc(100% - 186px);

这在包括 IE9 在内的所有现代浏览器中都有很好的支持。作为 IE8 的后备（如果您完全关心它），您可以先将高度设置为 100%，然后只有使用该浏览器的用户才能获得滚动条。

【参考方案2】：

您可以在下面的代码中使用绝对位置放置您的 div

#content
 top: 0;
 bottom: 0;
 position: absolute;