css - 如果有 margin-top 则拉伸(stretch) div 的高度直到页尾

Question

我有以下代码:

#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

谢谢!

Answer 1

使用 css 中的 calc 属性来执行您编写的操作:

height: calc(100% - 186px);

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