3

私の HTML には、外側の div 内に 2 つの div があります。

<div class="outer">
    <div class="col-left">
        <p>Lorem Ipsum is simply dummy text of the...
    </div>

    <div class="col-right">Right</div>

    <div class="clear"></div>
</div>

CSS は次のとおりです。

.outer {
    border: 1px solid black;
}

.col-left {
    float: left;
    background: cyan;
    width: 80%
    height: 100%;
}

.col-right {
    float: left;
    width: 15%;
    background: yellow;
    height: 100%;
}

.clear {
    clear: both;
}

height: 100% は、.outer クラスに px の高さを設定した場合にのみ有効になりますが、高さを固定してはいけない状況があります。

親で固定の高さを指定せずに高さ 100% を使用するにはどうすればよいですか?

Layne がコメントに書いたものを使用します。

4

3 に答える 3

1

タグの親タグ (html および body タグを含む) も 100% の高さにすると、問題が解決するはずです。オプションとして max-height を追加しましたが、コンテナを画面全体の長さで実行するかどうかはわかりませんでした。

http://jsfiddle.net/brandonbabb/SL3FC/

html, body {
    height:100%
}
.outer {
    border: 1px solid black;
    height: 100%;
    max-height: 500px
}
.col-left {
    float: left;
    background: cyan;
    width: 80%;
    height: 100%;
}
.col-right {
    float: left;
    width: 15%;
    background: yellow;
    height: 100%;
}
.clear {
    clear: both;
}
于 2013-07-23T15:53:59.953 に答える
1

jqueryを使う

$(document).ready(function(){
    var outerheight = $('.outer').height();
    $('.col-right').height(outerheight);    
});
于 2013-07-23T16:03:25.710 に答える