Question

我最难理解min-height应该如何运作。我想如果我将它放在一个包装div上，它会相应地扩展。

如果您的浏览器足够大，则页脚下方有一个很大的空间。如果没有太多内容，如果页脚触及视口的底部我想要它。

否则，如果内容量很大，那么页面显然应相应地滚动。

我的HTML文档是这样设置的（为了简洁起见，我删除了所有内容，只显示了嵌套结构）：

<div id="container">
        <div id="top" class="five-box-shadow full-ten-border">
            <div id="header" class="top-ten-radius">
                <div id="logo">
                </div>
                <div id="topbar">
                </div>
            </div>
        <div id="nav" class="bottom-ten-radius">
            <ul id="tabnav">
            </ul>
        </div>
        <div class="clearer"></div>
        </div>
        <div id="wrapper" class="full-ten-border five-box-shadow">
            <div id="content" class="full-ten-border">
                <div id="main"></div>
                <div id="secondary"></div>
                <div class="clearer"></div>
            </div>
            <div id="footer" class="bottom-ten-radius"></div>
        </div>
</div>

我认为可以使用随附的CSS：

#container {
    width: 880px;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 5px;*/
    min-height:100%;

}

现在，如果我将#container更改为height: 100%，它会向下延伸，但会过长并创建滚动条。

我该怎么办？

Answer 1

min-height只需设置用户可以减少div的最小高度，

我之前提到过这个，这就是你需要将它设置到浏览器底部而内容很少的东西：

http://www.alistapart.com/articles/fauxcolumns/

Answer 2

听起来您希望自己的页脚始终位于页面底部？

您可以通过为页脚ID 指定以下样式来实现此目的：

#footer{
position:fixed;
bottom:0;
}

您可能需要添加其他一些样式，但这样可以让您继续前进。

Answer 3

通常额外的空间是身体上的填充/边距和html标签（通常是浏览器自动添加）的结果。

html,body {height:100%;padding:0;margin:0}

高度为100％的内部对象+边距/填充仍然可以将其推出，因此您必须保持警惕或使用溢出：隐藏在某处。

使用CSS，如果内容不滚动，如何将文档扩展到用户的视口？

3 个答案: