0

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

我有一个简单的 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) 填充其内容的空间？

4

3 回答 3

1

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

Ryan Fait 的粘性页脚是我用过的最好的页脚。

于 2013-03-29T05:34:38.113 回答
0

的高度应该会自动增加，#content直到您将属性应用于子元素。尝试给予（如果你正在使用）可能会解决问题。floatpositionoverflow: auto#contentfloat

或使用or之类的替代float属性。display:inlinedisplay: inline-block

如果您不给float子元素，请#content尝试使用clear: both.

我希望这些提示对您有所帮助。

于 2013-03-29T05:37:14.780 回答
0

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);
}
于 2013-03-29T07:30:42.767 回答