1

divsコンテンツ領域とサイドバーに使用したい2つのフロートを使用してページレイアウトを設計しようとしています。レイアウトに関する私の問題はdivs、多くのテキストコンテンツでフロートされたもののいずれかをテストしたが、すべてのコンテンツを表示するように拡張されていないことです。最後の段落は私のフッターと重なっているようです

すでに含まれているものに追加overflow: autoしましたがdiv、動作しないようです。何か案は？

<body>

<div id="header">
</div><!--ends header-->

<div id="navbar">
</div><!--ends navbar-->

<div id="wrapper">

    <div id="content">

        <div class="post">
         <p> Long content tested here</p>
        </div><!--ends post-->

    </div><!--ends content-->

    <div id="sidebar">
    </div><!--ends sidebar-->

    <div id="footer">
    </div><!--ends footer-->

</div><!--ends wrapper-->

</body>

ここのCSS：

html{
    height:100%;
    background:url(images/green-bamboo2.jpg);
    background-attachment:fixed;
}

body{
    height:100%;
    width:80%;
    margin: 0 auto;
    padding:0;
    background:#FFFFFF;
}

#header, #navbar, #content, #sidebar, #footer{
    display:block;
}

#header{
    height:100px;
}

#navbar{
    height:50px;
    background:#CCCCCC;
}

#wrapper{
    min-height:100%;
    background:#FFFFFF;
    position:relative;
    overflow:auto;
}

#content{
    float:left;
    width:60%;
    height:auto;
    background:#99CC00;
}

#sidebar{
    float:right;
    width:40%;
    height:200px;
    background:#09F;
}

#footer{
    clear:both;
    height:150px;
    background:#339933;
    position:absolute;
    bottom:0;
    width:100%;
}
4

2 に答える 2

1

div の高さは auto に設定されています。これは問題ありませんが、フッター div は絶対位置に配置されているため、他の div が重なり始めても移動しません。position: relative にすると、div が大きくなるにつれて移動するはずです。

于 2012-05-10T21:09:41.670 に答える
0

css に問題があります。

clearとposition:absoluteon の両方を使用しています#footer。その結果、clear プロパティは使用されません。

編集: http://jsfiddle.net/WTpAx/1/を参照して、position:absoluteから#footerおよびmin-height:100%から削除した場合の外観を確認してください#content。

于 2012-05-10T21:10:13.593 に答える