1

私は次のjsFiddleを持っています: http://jsfiddle.net/YT5vt/

2 番目の DIV (div2) の高さを常に 100% にしたいのですが、最初の DIV と 3 番目の DIV を差し引いています。また、ブラウザーのサイズが変更されると、2 番目の DIV のみがサイズ変更されます。

ここにもコードがあります

HTML

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>

CSS

*{
    margin: 0;
    padding: 0;
}
body, html{
    width:100%;
    height: 100%;
}
.div1{
    width: 100%;
    background: #F00;
    height: 100px;
}
.div2{
    width: 100%;
    background: #FF0;
    height: 100%;
}
.div3{
    width: 100%;
    background: #00F;
    height: 25px;
}
4

1 に答える 1

4

CSS3calc()関数を使用するだけです。

.div2{
    width: 100%;
    background: #FF0;
    height: -webkit-calc(100% - 125px);
    height: -moz-calc(100% - 125px);
    height: calc(100% - 125px);
}

ただし、ブラウザーが関数を認識しない場合は、JS ベースのフォールバックを使用することをお勧めします。calc()全ユーザーの約 73% に支持されています -ソース.

http://jsfiddle.net/teddyrised/YT5vt/2/

少し複雑な JS ベース (具体的には jQuery ベース) のフォールバックは次のようになります。

$(window).resize(function() {
    $(".div2").height($(window).height() - $(".div1").height() - $(".div3").height()); 
}).resize();

// Resize is fired first when the document is ready,
// and then again when the window is resized

http://jsfiddle.net/teddyrised/YT5vt/5/

于 2013-09-26T19:08:44.963 に答える