Question

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

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

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

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

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

Answer 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>

我更新了您的小提琴here。

Answer 2

以下是jsfiddle示例。

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

Answer 3

您可以尝试div width和height 95-99%，但这并不总能保证10px的空间。如果您计划将所有内容放在一个位置，则可以在body或div上执行10px的填充，只需将overflow:hidden分配给body即可。

Answer 4

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

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

4 个答案: