0

レイアウトを理解しようとしています 全幅のヘッダーを取得しようとしています。ヘッダーの内側には、左側のサイドバーと右側のサイドバーがあります。本文は、全幅、左右のサイドバー、中央の 3 列のコンテンツの 5 つのセクションに分割され、フッターはヘッダーと同じになります。サイドバーは幅が固定されているため、中央のコンテンツは画面サイズに応じて圧縮または拡大されます。私はこれを達成するために多くの方法を試しましたが、陰気で失敗しました! 私の最善の試みは次のとおりです。「コメント付き」コードを追加すると、意図したとおりに左側のヘッダーサイドバーが追加されますが、左側のサイドバーが中央セクションになるはずの中央セクションに移動します。

私は非常に近いと思いますが、何かが欠けています。誰かが私を正しい方向に向けることができますか?

HTML

<body> 
<div class="container">
    <div class="header">
        <!--<div class="headerleft">
            <div class="headerleftcon">leftcon</div>
            </div>-->
        <div class="header-content">Header
        </div>
    </div> 
    <div class="body">body
        <div class="left-sidebar">
            <div class="left-content">left sidebar</div>
        </div>
        <div class="right-sidebar">
            <div class="right-content">right sidebar</div>
        </div>
        <div class="content">Content
        <div class="left-col">
            <div class="left-colcontent">left col</div>
        </div>
        <div class="right-col">
            <div class="right-colcontent">right col</div>
        </div>
        </div>
    </div> 
    <div class="footer">
        <div class="footer-content">Footer</div>
    </div>
</div> 
</body>

CSS

html, body {
 height: 100%;
 width: 100%;
 padding: 0px;
 margin: 0px;}
.header, .footer{
 height: 80px;
 background-color: #EFEFEF;
 position: relative;}
.header-content{
 padding: 20px;
 text-align: center;}
/*.headerleft{
 height: 100%;
 background-color: red;
 width: 200px;
 float: left;}
.headerleftcon{
 padding: 0px 0px 0px 0px;}*/
.footer-content{
 padding: 20px;
 text-align: center;}
.container{
 height: 100%;}
.body{
 height: 100%;
 margin-top: -80px;
 margin-bottom: -80px;
 background-color: #C7DFFA;} 
.content{
 padding: 0px 0px 0px 0px;}
.left-sidebar{
 height: 100%;
 background-color: gray;
 width: 200px;
 float: left;} 
.right-sidebar{
 height: 100%;
 background-color: gray;
 width: 200px;
 float: right;}
.right-col{
 height: 500px;
 background-color: blue;
 width: 150px;
 float: right;} 
.left-col{
 height:500px;
 background-color: blue;
 width: 150px;
 float: left;} 
.left-content{
 padding: 100px 10px 100px 10px;
 margin: }
.left-colcontent{
 padding: 100px 10px 100px 10px;} 
.right-content{
 padding: 100px 10px 100px 10px;
 text-align: right;}
.right-colcontent{
 padding: 100px 10px 100px 10px;
 text-align: right;

JSFiddle

4

1 に答える 1

2

この jsfiddle をご覧ください: http://jsfiddle.net/Ab2LT/

これがあなたが期待している結果であるかどうかはわかりません。<div style="clear:both"></div>フロートされた要素をクリアするために、div ヘッダーの末尾にa を追加しました 。

于 2013-04-02T15:57:34.267 に答える