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

你可以用 jQuery 做到这一点。

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


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

score 0 · Accepted Answer

在隐藏您添加的折叠元素的同一个 JS 中

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

当你再次显示崩溃时，当然反过来

3 回答 3