填充幻灯片切换中的可用空间

Question

我有2 div个内容使用JQuery slidetoggle来显示/隐藏，但我希望第二个占据屏幕的所有剩余垂直高度。

$('.heading').click(function (e) {
    $(e.target).parent().children('.content').slideToggle("fast", "swing");
});

jsFiddle我开始：http://jsfiddle.net/LMHgM/

任何想法如何在不诉诸javascript的情况下完成此操作？希望这应该是浏览器调整大小和其他元素大小调整应该使这个贪婪的div处于正确的状态。目前我唯一的解决方案是在slidetoggle上触发我自己的resize方法，并调整浏览器大小以校正高度。

感谢。

Answer 1

您应该为元素指定高度为100%，还应为body和html

指定高度

DEMO http://jsfiddle.net/kevinPHPkevin/LMHgM/3/

body, html {
    height:100%;
}

#second {
    border: 1px dashed blue;
    height:100%;
}

Answer 2

基本上它正在折叠以适应内容，而不是扩展以适应页面。您还可以使用position: absolute和height:＆amp;放置div的包装div。 width: 100％

更新了小提琴：http://jsfiddle.net/LMHgM/2/

.wrapper{
    position: absolute;
    height: 100%;
    width: 100%;
}

Answer 3

似乎最好的解决方案是使用display: table来划分屏幕。

.wrapper {
    width: 100%;
    height: 100%;
    display: table;
    border-collapse: collapse;
}


.group {
    display: table-row;
}

http://jsfiddle.net/LMHgM/5/