Question

我见过这样的一些问题，但它们已经陈旧，没有一个解决方案对我有用......

我有一个简单的HTML

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

和我的css

#outer {width: 800px; margin: 30px auto;}
#nav {height: 40px; width: 800px;}
#content {width: 800px;}
#footer {height: 40px; width: 800px;}

内容似乎选择自己的高度并保持高度，无论其中是什么。如何使其（#content）填充其内容空间？

Answer 1

默认情况下，

#content设置为height:auto，根据内容设置高度。如果你要求页脚停留在屏幕的底部，即使没有足够的内容来填充屏幕，那么你需要使用某种“粘性页脚”。

Ryan Fait's sticky footer是我用过的最好的。

Answer 2

#content的高度应自动增加，直到您将float或position属性应用于子元素。尝试将overflow: auto提供给#content（如果您使用float）可能会解决问题。

或使用“float或display:inline等display: inline-block属性的替代。

如果您未将float提供给#content的子元素，请尝试使用clear: both。

我希望这些提示可以帮到你。

Answer 3

http://jsfiddle.net/gWdQj/

导航栏+内容+页脚的高度始终至少为视口的100％。如果还有更多，这个css会相应地自动调整高度。

HTML

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

CSS

html, body, #outer
{
    height:100%;
    border:1px solid black;
}

#nav
{
    height:38px; /* this is an exmple height. Insert your own. */
    border: 1px solid red;
}

#footer
{
    height:48px; /* this is an example height. Insert your own. */
    border:1px solid purple;
}

#content
{
    min-height: calc(100% - 38px - 48px); /* css3 function to calculate content height, which is 100% of parent minus navbar height - footer height */
    min-height: -webkit-calc(100% - 38px - 48px);
    min-height: -moz-calc(100% - 38px - 48px);
}

导致DIV填写页面？

3 个答案: