<div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:"> <div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:"> <div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:" />

子の高さ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
@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