Question

结构与我用于我网站的结构完全相同，但问题是我没有让我网站的中间部分达到100％。现在，它的内容决定了它的高度。

<body>
    <div id="page-container">
        <header></header>

        <div id="page-wrapper">
            <div id="page-content">

            </div>
        </div>

        <footer></footer>
    </div>
</body>

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

header {    width: 100%;    height: 50px;    background-color: red; }

footer { width: 100%; height: 50px; position: absolute; bottom: 0; background-color: green; }

#page-wrapper { width: 1024px; margin: 0px auto; background-color: yellow; }
#page-content { height: 100%; background-color: pink; }

Answer 1

不是100％肯定我知道你的意思，但你是否尝试过将高度：100％添加到页面包装div？

#page-wrapper{ 
 height:100%;
 width: 1024px; 
 margin: 0px auto; 
 background-color: yellow;
}

Answer 2

我过去遇到过这个问题。我看到的方式是，当你指定height: 100%;时，它会填充100％的div（或任何元素） - 但不会填充到屏幕大小。我总是不得不在某处使用min-height来获得您正在寻找的类似结果。

对于正文或可能是page-wrapper div，请尝试指定min-height: 500px;（或任何您认为合适的尺寸。

Answer 3

制作页面容器

height: 100%;

以便内部的物体知道盒子的大小。

比你可以制作页面包装

position: absolute;
bottom: 50px;
top: 50px;
height: auto; /*can also be left away*/

现在中间部分将位于页脚和标题之间 http://jsfiddle.net/K6CFU/5/

你可以制作页面内容

height: 100%;

或者你可以把它放在一边，就像你想要的那样。

仅使用CSS的100％高度中心部分

3 个答案: