0

我有 4 个 div 一个包装器和一个页眉、中间和页脚..

我的问题是我成功地让页脚保持在底部，但现在中间（内容）div 没有拉伸到 100%，它只是停留在文本的高度。

XHTML

<div class="wrapper">
<div class="header">&nbsp;</div>
<div class="content">&nbsp;</div>
</div>
<div class="footer">&nbsp;</div>

CSS

body{
font-family: Century Gothic, sans-serif;
background-color: #f5ecd4;
text-align:center;
background-image: url('../images/header.jpg');
background-repeat: repeat-x;
background-position: center top;
}
body, html{
margin:0;
padding:0;
height:100%;
}
.wrapper{
margin-left:auto; 
margin-right:auto;
width:822px;
height:100%;
margin:0 auto -47px;
}

.header{
height:200px;
text-align:center;
background-image: url('../images/banner.jpg');
background-repeat: no-repeat;
}

.content{
border:1px solid #000;
height:100%;
background-image: url('../images/content.jpg');
background-repeat:repeat-y;
}

.footer{
text-align:center;
width:100%;
height:47px;
background-image: url('../images/footer.jpg');
background-repeat:repeat-x;
color:#FFFFFF;
font-size:12px;
}
4

3 回答 3

1

100% 只适用于宽度而不是高度来实现这一点你可能需要使用一些像这样的javascript

html_height = $(document).height();
content_height = $('.header').height() - $('.footer').height();
$('.content').height(content_height);

希望这能满足你的要求，对不起，这是 jquery

于 2012-08-18T03:48:39.410 回答
0

我想到了！

<div class="content">
    <div class="wrapper">
        <div class="header">&nbsp;</div>
        &nbsp;
    </div>
</div>
<div class="footer">&nbsp;</div>
于 2012-08-18T03:59:06.693 回答
0

尝试使用position:absolute, top:0, bottom:0

于 2012-08-18T03:50:06.860 回答