css - XHTML 和 CSS - 流体高度 div 未拉伸(stretch)到 100%

Question

我有 4 个 div，一个包装器围绕着它们，还有一个页眉、中间和页脚..

我的问题是我成功地让页脚保持在底部但现在中间(内容)div 没有拉伸(stretch)到 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;
}

Answer 1

100% 仅适用于宽度但不适用于高度，您可能需要像这样使用一些 javascript

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

希望这能满足您的需求，抱歉这是 jquery