我有这样的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(假设有一个js脚本使#collapse显示和隐藏)?
最佳答案
试试这个:
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;}
您可以删除按钮并自定义此代码。
看到这个DEMO
关于javascript - 自动调整高度 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14393223/