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

Question

我试图得到一个div文件的宽度和高度.如图所示,减去10个像素:http: //screensnapr.com/v/a9JWIf.png

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

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

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

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

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

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>

我在这里更新了你的小提琴。

Answer 2

您可以尝试给出 adiv和widthof height，95-99%但这并不总是保证 10px 的空间。如果您打算将所有内容放在一处，您可以在body或 上进行 10 像素的填充div，然后将overflow:hidden其分配给 。body