子divは親divに展開されません

1つの親と2つの子があります。次のように

親は次のとおりです。

#parent { 
    overflow:auto; 
    margin: 0 auto; 
    margin-top:37px; 
    min-height: 100%; 
    width:875px; 
}

#child1 { 
    overflow:auto; 
    min-height:150px; 
    border-bottom:1px solid #bbb; 
    background-color:#eee; 
    opacity:0.4; 
} 

#child2 { 
    height:100%; 
    background-color:white; 
}

私は最後まで、それの境界を見ることができるように、親のdivが100％を拡張し、次のように2つのつの子のdivがあります親divのように、child2はページの最後まで伸びていません。

出典

2011-12-08 DemCodeLines

これはあなたがやろうとしていることです： http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the -page-with-a-minimum-height – jmacinnes

いいえ、私の2番目の子divは親の高さまで完全に伸びておらず、私が入力した各行はdivを拡張しています。それ以外は、divは拡張されません。 – DemCodeLines

高さは、あなたが予想しているように振る舞いません。 height: 100%と指定すると、高さが指定されている要素の最初の親のDOMを検索し、その割合がabsoluteまたはrelativeになるようにパーセントを計算します。

それはbodyタグに来るときあなたがカンニングすることができますので、あなたはこのような何かを持っていた場合：

<body> 
    <div style="height: 100%"> 
    </div> 
</body>

一部のブラウザ/バージョンでは、ページの高さの合計を取ることによって、思ったように動作します。しかし、あなたがそれより深く行くとうまくいきません。

ここでは、divをページの下に伸ばして使用するアプローチです。絶対的な位置付けが必要です（これは素晴らしいブラウザ間互換性があり、javascriptを必要としないことです）：ここでは

<div id="parent"> 
    <div id="childNorm"></div> 
    <div id="childStrech"></div> 
</div> 



#parent 
    { 
     position: absolute; 
     width: 1000px; 
     bottom: 0; 
     top: 0; 
     margin: auto; 
     background-color: black; 
    } 

    #childNorm 
    { 
    position: absolute; 
    width: 1000px; 
    top: 0; 
    height: 50px; 
    background-color: blue; 
    color: white; 
    } 

    #childStrech 
    { 
    position: absolute; 
    width: 1000px; 
    top: 50px; 
    bottom: 0; 
    background-color: red; 
    color: white; 
    }

デモ用Jsfiddleです：http://jsfiddle.net/t7ZpX/

トリック：あなたは絶対位置を指定すると

とは、要素が目にストレッチする原因となるbottom: 0;に入れますページの下部。要素をトレードオフとして配置することについては心配する必要があります。

出典

2011-12-08 04:12:47

はい、これはCSSの迷惑なことの1つです。 min-heightは、heightを計算する目的では「高さ」とはみなされません。 http://jsfiddle.net/3raLu/3/を参照してください。子供を完全な高さにするには、親divにheight: 100%が必要です。または、それが絶対的に配置されている場合は、これは動作します：http://jsfiddle.net/3raLu/6/。

出典

2011-12-08 04:24:20 ScottS

子divは親divに展開されません

答えて

関連する問題