1

如果有一个非常基本的布局，带有页眉、内容容器和页脚。我需要做的是使我的内容容器变大，以便整个布局适合屏幕。（除非内容容器中的文本当然会扩展它）。

我尝试为我的身体分配一个 100% 的高度值，然后从那里将我的内容容器高度也分配给 100%，但这会导致我的内容容器大小达到全屏的高度。

在此之前，我将内容容器的高度设置为自动，这当然会导致页面不够长，如果屏幕尺寸大于布局的访问者查看页面。

这是我的代码的一部分：

HTML：

<body>
    <div class="background"></div>
        <div class="page">
            <div class="header">
            </div>

            <div class="content">
            </div>

            <div class="footer">
            </div>
        </div>
</body>

CSS：

html, body {
    height:100%; 
    margin:0; 
    padding:0;
}
.page {
    position:relative; 
    height:100%;
    z-index:1; 
}
.content {
    position:relative;
    width:850px;
    height: 100%;
    margin: 0 auto;
    background: url(images/content.png) 0 0 repeat-y;
}
4

2 回答 2

3

我认为这是您需要的（页脚将始终粘在底部）

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
.page {
    min-height:100%;
    position:relative;
}
.header {
    background:#00ff0f;
    padding:30px;
}
.content{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify; 
 }
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px;   /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
    height:100%; // IE HACK
}

HTML

<div class="page">
    <div class="header">Header</div>
    <div class="content">
        Some Content Here...
    </div>
    <div class="footer">Footer</div>
</div>​

在所有主要浏览器中测试。 演示。

​</p>

于 2012-09-09T19:43:14.653 回答
0

你真正想要的是一个粘性页脚，不是吗？您可以设置其他元素的样式，以产生 #content 元素比实际更大的错觉。

http://ryanfait.com/sticky-footer/

于 2012-09-09T19:19:01.047 回答