0

2 つの div を含む div があり、1 つは高さが固定されています。2 番目の div の高さが、コンテナー div の高さから他の div の高さを差し引いたものとまったく同じであることを確認したいと思います。この高さは頻繁にサイズ変更されるため、手動で設定することはできません。

<div id="container" style="height: 50%"> 
<div id="header" style="height: 30px;"> 
</div> 
<div id="content"> 
</div> 
</div>

サイズ変更でjqueryを試しましたが、何か間違ったことを書いたと思います：

$(document).on("resize", "#container", function (event) {
    $('#content').height($('#container').height()-$('#header').height());
});

これを達成する方法（Javascript、CSS）はありますか？

4

3 に答える 3

2

jQuery メソッドの代わりに CSS Flexbox があります。

#container {
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
}

デモを参照してください。残念ながら、これは最新の Flexbox 構文をサポートするブラウザーでのみ機能します。( http://caniuse.com/#search=flexbox ) 古い構文を使用しても下位互換性のあるコードを作成できますが、一見複雑になります。その方法の詳細については、 http: //coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ にある David Storey の記事を参照してください。

于 2013-10-13T14:19:40.177 に答える
1

私はあなたのための純粋なCSSソリューションを持っています.Working Fiddleをチェックしてください.

HTML:

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
</div>

CSS:

#container {
    height: 300px; /*Whatever fixed height you want*/
}
#container:before {
    content:'';
    float: left;
    height: 100%;
}
#header {
    height: 30px;/*Whatever fixed height you want, or not fixed at all*/
    background-color: red;
}
#content {
    background-color: blue;
    /*No height spesified*/
}
#content:after {
    content:'';
    clear: both;
    display: block;
}
于 2013-10-13T14:19:50.613 に答える
1

あなたの主な問題は、最初に要素のサイズを変更してから、サイズ変更イベントをリッスンし続ける必要があることです。

function handleResize() {  
   $('#content').height($('#container').innerHeight()-$('#header').height()); 
}

$(window).on("resize", handleResize);

handleResize();

また、サイズ変更イベントはウィンドウに直接アタッチする必要があります。

innerHeight()それ以外の場合は、パディングを考慮してコンテナに を使用することをお勧めします。

また、これが完全に機能するように、CSS にいくつかの修正を加えました。

#container {
   position: absolute;
   width: 100%;
   height: 50%;
}

ここで完全なフィドルを参照してください：http://jsfiddle.net/kjcY9/1/

于 2013-10-13T14:08:22.853 に答える