css div自动填充文档内的所有可用空间答案

【问题标题】：css div auto fill all available space inside of documentcss div自动填充文档内的所有可用空间
【发布时间】：2011-10-20 07:09:47
【问题描述】：

我正在尝试获取一个 div，它是文档的宽度和高度。周围减去 10 个像素，如下图所示： http://screensnapr.com/v/a9JWIf.png

但每次我填充或添加到正文或外部 div 的边距时，它都会增加文档的总高度并显示滚动条。

如何使 div 自动填充所有可用大小而不扩展文档的大小？

编辑：任何负边距都不会影响 div 的总大小

这是一个小提琴 http://jsfiddle.net/ZRz32/6/

如您所见，它扩展了文档高度。我需要它来保持文档的大小减去十个像素

【问题讨论】：

能否提供fiddle 或提供一些示例代码？
试试这个：ryanfait.com/resources/footer-stick-to-bottom-of-page
@Alp 我不需要它粘在底部。我需要它是文档高度减去一定数量的像素。

标签： html css

【解决方案1】：

我认为这是最简单的方法：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
}
#main {
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px;
    background-color: green;
}

<div id="container">
    <div id="main"></div>
</div>

我更新了你的 Fiddle here。

【讨论】：

jsfiddle.net/ZRz32/9 这是放置内容时的样子，您的解决方案不适用于绝对值。
@Drake，根据你所说的，这实际上是你最好的解决方案。它不起作用的原因是因为您将内容放在主 div 和容器 div 中。您应该只将内容放在主 div 中。

【解决方案2】：

这是一个jsfiddle 示例。

本质上，您需要将包含元素设置为width:100%，并在左右两侧（padding:0 10px）为其设置 10 像素的填充。然后，您可以将您的内部元素设置为width:100%，它们只会在最大文档宽度的 10px 范围内。

【讨论】：

问题不只是宽度。该解决方案不适用于高度。您可以在您的小提琴示例中对其进行测试。

【解决方案3】：

如果您希望它固定在页面上，您可以使用定位：<div style="position:fixed; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgba(155, 155, 155, .6);">Some text</div>

【讨论】：

由于背景会有渐变，固定定位是不够的。

【解决方案4】：

您可以尝试将div 分配给width 和height 或95-99%，但这并不总是保证10px 的空间。您可以在body 或div 上进行10px 的填充，如果您打算将所有内容放在一个地方，只需将overflow:hidden 分配给body。

【讨论】：

是的，小于 100 的百分比不是我想要的。我不打算隐藏滚动条，因为它们是需要的。
如果需要它们，那么为什么不能用填充来制作它们？如果只使用垂直条，那么您可以使用overflow-x:hidden;，这将消除水平滚动条。
问题不只是水平滚动条，两者兼而有之。隐藏问题并不能解决问题。