Question

我有四个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;
}

Answer 1

100％仅适用于宽度而不是高度才能实现这一点你可能需要使用这样的一些javascript

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

希望这可以做你想要的，抱歉这是jquery

Answer 2

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

Answer 3

我明白了！

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

XHTML和CSS - 流体高度div未拉伸至100％

3 个答案: