0

学校のプロジェクトで問題が発生しています。現在、div セクションを作成しています。そして、各 div セクション内で、より明確に見えるように色分けしました。私の leftnav div では、下からフッターまで分岐しません。JSFIDDLE はこちら - http://jsfiddle.net/rM8zw/

誰かが私がこれを修正し、私が間違ったことを説明するのを手伝ってくれたら? 継承の一部が正しく機能するように、3 つのコンテナー div があります。leftnav と bodyline のコンテナ、メイン サイトのコンテナ、BmiddleLeft と Right のコンテナ。ありがとうございます。

#leftnav がボディラインまでの高さを完成させない理由を理解しようとしています。

CSSはこちら-

#container{
    width:980px;
    height:auto !important;
    height:900px;
    min-height:900px;
    padding-top:20px;
    padding-bottom:20px;
    margin: 0 auto; 
    boder: solid 0px;
    overflow:hidden;
}
#holder{
    width:980px;
    height:auto !important;
    height: 800px;
    min-height:800px;
    padding:0;
    margin:0 auto; 
    border: solid 0px;
    overflow:hidden;
    background:#FFF;
}
#header{
    width:980px;
    height:100px;
    border:solid 0px;
    margin:0 auto;
    padding:0;
    background:#FF0000;
}
#navbar{
    width:980px;
    height:40px;
    border:solid 0px;
    margin:0 auto;
    padding:0;
    background:#c0c0c0;
}
#bodycontainer{
     width:980px;
     height:800px;
     min-height:800px;
     height:auto !important;
     overflow:hidden;
}
#leftnav{
     float:left;
     width:200px;
     height:1200px;
     min-height:1200px;
     height:auto !important;
     padding:0;
     overflow:hidden;
}
#bodyline{
     float:right;
     width:780px;
     height:800px;
     min-height:800px;
     height:auto !important;
     background:#00FF40;
     overflow:hidden;
}

私が現在使用しているHTMLはこちらです-

<div id="container">
    <div id="holder">
    <div id="header">
    </div>
    <div id="navbar">
    </div>
    <div id="bodycontainer">
        <div id="leftnav">
        </div>
        <div id="bodyline">
            <div id="Btop">
            </div>
            <div id="BmiddleCont">
                <div id="BmiddleLeft">
                hello
                <br />
                </div>
                <div id="BmiddleRight">
                </div>
            </div>
            <div id="Bbottom">
            </div>
            <div id="BbottomLast">
            </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

これが少し良くなることを願っています。

4

2 に答える 2

2

min-heightasを設定するとinherit、値が見つかるまで上昇します。この場合、 まで に#container設定されてい900pxます。そのため、heightあなたの#leftnavは のみ900pxです。min-heightオーバーライドしますheight。さらに、 をmin-height取り出して保管するheight: auto場合は、 に制限が課されないheightため、のがそのコンテンツの になりheightます。これはこの場合です。leftnavheight0

を設定する方法はいくつかありますheight。右側のすべての要素に高さを明示的に設定しているため、最も簡単な方法は、それらを合計してから、その結果の値を明示的に設定することheightですleftnav。

heightこれらの値が単なるダミー値であり、右側の要素の高さがそれらのコンテンツに依存する場合、いくつかのオプションがあります。

1.のをその親の に実際に設定しheightます( )。これを行うには、(親に設定することを忘れないでください) に設定し、その上、左、下の値を 0 に設定します。この場合、親 ( ) の も同じに設定する必要があります。の値(ここ)。または、兄弟 ( ) に設定して、のを変更したり、 に設定したりする必要がないようにします。-デモ#leftnavheight#bodycontainerpositionabsoluteposition: relativepadding-left#bodycontainer#leftnavwidth200pxleft-margin: 200px;#bodylinewidth#bodycontainerbox-sizingborder-box

2.同じように見えるようにしますheight。

a)簡単な方法。親 ( ) のgradientとしてカラー ストップ付きの を使用- DEMO //冗長なコードのないデモbackground#bodycontainer

background: linear-gradient(left, #FF00FF 200px, transparent 200px);

次の 2 つの点に注意してください。

  • 1 つ目は、接頭辞なしでグラデーションがまだサポートされていないため、接頭辞を追加する必要があります。
  • 2、これは IE9 以前では動作しません

(詳細については、 caniuse.comを参照してください)

b)最適な互換性方法 (IE8+ で動作)。親で疑似要素を使用し、#bodycontainer絶対に配置し、そのと の値をに設定しtop、と を指定します。- DEMO //冗長コードなしのデモleftbottom0#leftnavwidthbackground

#bodycontainer:before {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 200px;
    background: #f0f;
    content:'';
}
于 2012-08-20T04:22:57.657 に答える
0

display:table-cell を使用し、float タグを削除します。

    #leftnav{
     display:table-cell;
     width:200px;
     height:inherit;
     min-height:inherit;
     height:auto !important;
     background:#FF00FF;
     padding:0;
     overflow:hidden;
      }
    #bodyline{
    display:table-cell;
    width:780px;
    height:800px;
    min-height:800px;
    height:auto !important;
    background:#00FF40;
    overflow:hidden;
}
于 2012-08-20T06:19:15.477 に答える