0

这是我制作的 JS 小提琴：http: //jsfiddle.net/K6CFU/

该结构与我用于我的网站的结构完全相同，但问题是我没有让我的网站的中间部分达到 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; }
4

3 回答 3

0

不是 100% 确定我知道你的意思，但你有没有尝试将 height:100% 添加到页面包装器 div 中？

#page-wrapper{ 
 height:100%;
 width: 1024px; 
 margin: 0px auto; 
 background-color: yellow;
}
于 2013-04-29T22:20:03.670 回答
0

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

对于 body 或可能为您的page-wrapperdiv，尝试指定min-height: 500px;（或任何您认为合适的大小。

于 2013-04-29T22:20:14.187 回答
0

制作页面容器

height: 100%;

让里面的物体知道盒子的大小。

比你可以制作页面包装器

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

现在中间部分将在页脚和页眉之间 http://jsfiddle.net/K6CFU/5/

你可以制作页面内容

height: 100%;

或者你可以随心所欲地离开它。

于 2013-04-29T22:33:19.500 回答