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

使ってみてくださいposition:absolute, top:0, bottom:0

于 2012-08-18T03:50:06.860 に答える
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 に答える