javascript - 高さ CSS の自動サイズ変更

Question

私はこのようなhtmlコードを持っています

<div id="wrapper">
  <div id="collapse"></div>
  <div id="content"></div>
</div>

CSSコード

#wrapper {
  width:100%;
  height: 100%;
}
#collapse {
  width:100%;
  height: 30%;
}
#content {
  width:100%;
  height: 70%;
}

私が聞きたいのは、#collapse が非表示のときに #content の高さを #wrapper に合わせる方法です (#collapse を表示および非表示にする js スクリプトがあると仮定します) ?

score 3 · Accepted Answer

これを試してください:
HTML コード:

<div id="main">
<div id="Example">Hello</div>
<button id="Toggle">Toggle</button>
<div id="body">This is Body!!!</div>
</div>

JS コード:

$('#Toggle').on('click', function() {
    $('#Example').slideToggle({
        duration: 1000,
        easing: 'easeOutCubic'
    });
});

CSS コード:

#Example {
    height: 100px;
    background: #cc0000;
}
#main{ height:500px;
background-color:yellow;}
#body{  height: 100%;
background-color:blue;}

ボタンを削除して、このコードをカスタマイズできます。
このデモを見る

score 0 · Accepted Answer

追加した折りたたみ要素を非表示にする同じ JS で

document.getElementById('content').style.height = '100%';

そしてもちろん、あなたが再び崩壊を示すときは逆に

score 0 · Accepted Answer

これは jQuery で行うことができます。

See the example 
[http://jsfiddle.net/atinder123/6hq8h/][1]


  [1]: http://jsfiddle.net/atinder123/6hq8h/

3 に答える 3