子の高さdiv親のdivの下に展開

Question

子の高さdiv親のdivの下に展開

私は次のHTMLを持っています：

<div class="div1">
    <div class="div1a"></div>
    <div class="div1b"></div>
    <div class="div1c"></div>
</div>

Here a link of layout: http://jsfiddle.net/7ZGaG/5/

私はdiv1にのみ高さを与える必要があります。

div1aとdiv1bの高さは固定されています。（実際div1の高さも固定されています）
div1cはdiv1の最後まで拡張する必要があります。

例えば：

div1: 400px
div1a: 100px
div1b: 100px
div1c: 50px

したがって、底に150pxの空の場所があります。（400-100-100-50 = 150）。 div1のdiv1の高さはdiv1のCSSでどのように解決できますか？

div1cの height：100％を実行すると、div1の高さが400pxになります。

ありがとう！

1

追加された 28 10月 2011 〜で 08:51 著者 Ozkan 編集された 23 12月 2011 〜で 09:48

ビュー: 8

源

ro ru fr es pt de hi bn ar kk uz be tr

@Ozkan：私はCSSの純粋主義者ですが、JavaScriptを使ってdiv1の高さを設定するとJavaScriptを使ってdiv1cの高さを設定することもできます。

追加された 03 9月 2012 〜で 03:56, 著者 Dan Dascalescu, 源

高さを試してみるとどうなりますか？ div1cの

追加された 28 10月 2011 〜で 09:15, 著者 Rohan, 源

何らかの理由でdiv1cの高さを200ピクセルに設定できないのですか？ div1の身長はこれまでどおりに変わるでしょうか？

追加された 28 10月 2011 〜で 09:17, 著者 dunnza, 源

@Ozkan、私の悪い！これらの高さはJavaScriptで動的に設定されていますか？

追加された 28 10月 2011 〜で 09:35, 著者 dunnza, 源

確かにそうです。私はJavaScriptを介して親のdivに高さを与える必要があります

追加された 28 10月 2011 〜で 09:44, 著者 Ozkan, 源

あなたが私をよく理解していないと思う。私はそれを設定することはできません。 div1は動的である必要があります（400ピクセルは固定されていません）。それは違うかもしれません。 div1cは常に親divの末尾に展開する必要があります（div1cも固定値にすることはできません）

追加された 28 10月 2011 〜で 09:21, 著者 Ozkan, 源

@ロハン次に、それはそれ自身の高さ（50px）

追加された 28 10月 2011 〜で 09:17, 著者 Ozkan, 源

4 答え

.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

See working example: http://jsfiddle.net/Wexcode/ENaqK/

3

追加された 28 10月 2011 〜で 09:46 著者 Wex

源

ああ、あなたが言っていることが分かります。私はそれがハッキーより賢いと言うだろう;）

追加された 29 10月 2011 〜で 05:27, 著者 Wex, 源

うーん、このハッキーはいかに正確ですか？浮動小数点のプロパティを使用しているだけです。

追加された 28 10月 2011 〜で 10:32, 著者 Wex, 源

これはありがたいですが、まだ少しハッキーです。でもOK：D

追加された 28 10月 2011 〜で 09:53, 著者 Ozkan, 源

左に浮動小数点はdivが上記のdivを除いていなければならないことを意味します。しかし、ここではすべてのdivを垂直に

追加された 28 10月 2011 〜で 10:55, 著者 Ozkan, 源

著者 nheinrich · Answer 1 · 2011-10-28T09:19Z

これを行うCSSがいくつかあります。

.div1 is overflow: hidden set to grab the height of the tallest div. Which it sounds like it could be .div1a or .div1b. .div1c is position: absolute so that it can use .div1 is a guide, it positions itself off of the bottom and is put into position with top and right.

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

and a fiddle: http://jsfiddle.net/neilheinrich/7ZGaG/

著者 dunnza · Answer 2 · 2011-10-28T09:37Z

ここで私が思いついたことがあります（私のjsfiddle ）：

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

JavaScriptにアクセスできるのであれば、私は少し違ったやり方をします。

著者 Swanidhi · Answer 3 · 2012-09-23T03:53Z

Easy solution would be to style the parent div with overflow:hidden and the child div with height:100%

次の属性を追加します。

For div1

position：固定

For div1c

overflow:hidden; position:relative; height:100%;

Sample code - http://jsfiddle.net/7ZGaG/26/