自动调整高度CSS
Auto resize height CSS
我有这样的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%;
}
我想问的是如何使#content的高度适合#wrapper时,#collapse是隐藏的(假设有一个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
您可以使用jQuery完成此操作。
See the example
[http://jsfiddle.net/atinder123/6hq8h/][1]
[1]: http://jsfiddle.net/atinder123/6hq8h/
在同一个JS中隐藏你添加的collapse元素
document.getElementById('content').style.height = '100%';
当然,当你再次显示折叠时,也要反过来
相关文章:
- 使用jQuery可以根据窗口大小更改滑块的css高度
- 以非像素为单位获取HTML DOM元素的CSS高度,在我的例子中是英寸
- 按下按钮使$(“身体”).css(“高度”:“100%”)
- 应用 css 高度后获取网页上元素的默认高度)
- CSS 高度在火狐中不起作用
- jquery 如果 CSS 高度> Xpx 执行此操作
- 如何覆盖 JCuQuery/JavaScript 设置的 CSS 高度
- 为什么css高度不起作用
- 从另一个中获取css高度值
- 访问CSS高度值(通用方法)
- 我需要添加一个条件语句来将css高度链接到下拉选择(jQuery)
- HTML/CSS高度100%和像素
- jQuery使用css高度调整大小函数
- CSS高度:无法增加父类的高度
- 如何使用min/max-height和height为元素应用响应式CSS高度
- 如何获得一个对象的css高度属性,并添加20px
- $('').css('height')在JQuery中返回计算的高度,而不是css高度
- JQuery切换动画干扰CSS高度过渡
- jQuery在设置动画后更新元素的css高度
- jQuery css高度不适用