子の高さ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
追加された 編集された
ビュー: 4
源
ro ru fr es pt de hi bn ar kk uz be tr
@Ozkan：私はCSSの純粋主義者ですが、JavaScriptを使ってdiv1の高さを設定するとJavaScriptを使ってdiv1cの高さを設定することもできます。
追加された 著者 Dan Dascalescu, 源
高さを試してみるとどうなりますか？ div1cの
追加された 著者 Rohan, 源
何らかの理由でdiv1cの高さを200ピクセルに設定できないのですか？ div1の身長はこれまでどおりに変わるでしょうか？
追加された 著者 dunnza, 源
@Ozkan、私の悪い！これらの高さはJavaScriptで動的に設定されていますか？
追加された 著者 dunnza, 源
確かにそうです。私はJavaScriptを介して親のdivに高さを与える必要があります
追加された 著者 Ozkan, 源
あなたが私をよく理解していないと思う。私はそれを設定することはできません。 div1は動的である必要があります（400ピクセルは固定されていません）。それは違うかもしれません。 div1cは常に親divの末尾に展開する必要があります（div1cも固定値にすることはできません）
追加された 著者 Ozkan, 源
@ロハン次に、それはそれ自身の高さ（50px）
追加された 著者 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
追加された
源
ああ、あなたが言っていることが分かります。私はそれがハッキーより賢いと言うだろう;）
追加された 著者 Wex, 源
うーん、このハッキーはいかに正確ですか？浮動小数点のプロパティを使用しているだけです。
追加された 著者 Wex, 源
これはありがたいですが、まだ少しハッキーです。でもOK：D
追加された 著者 Ozkan, 源
左に浮動小数点はdivが上記のdivを除いていなければならないことを意味します。しかし、ここではすべてのdivを垂直に
追加された 著者 Ozkan, 源

これを行う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/

0
追加された
源
あなたのコメントに基づいて若干異なるように更新されました。
追加された 著者 nheinrich, 源
ああ、私はあなたが列に行くと思った。
追加された 著者 nheinrich, 源
あなたはこれを行うことができます： jsfiddle.net/neilheinrich/7ZGaG/6 。しかし正直なところ、それはかなりハッキーです。
追加された 著者 nheinrich, 源
いいえ、私はdiv1cに固定された高さを与えることはできません。 div1（親）は固定された高さを持つべきではないので
追加された 著者 Ozkan, 源
こんにちは@nheinrich。あなたが持っているレイアウトは異なります。 jsfiddle.net/7ZGaG/5 ここでそれを見ることができますし、私の問題もあります。だから、ピンクのdivは親のdivに拡張する必要がありますが、どうですか？
追加された 著者 Ozkan, 源

ここで私が思いついたことがあります（私の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にアクセスできるのであれば、私は少し違ったやり方をします。

0
追加された
源
私のメインポストを参照してください私はテンプレートのためにしてください。レイアウトは浮動せずに垂直です
追加された 著者 Ozkan, 源

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/

0
追加された
源
質問に関連するサンプルコードは参考になります（面白い答えです）。
追加された 著者 cale_b, 源
ただ私のポストを更新しました。サンプルコードが追加されました。乾杯！
追加された 著者 Swanidhi, 源
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript

開く Telegram