javascript - 填充滑动切换组中的可用空间

Question

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

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

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

有什么想法可以在不使用 javascript 的情况下做到这一点吗？希望这应该是浏览器大小调整和其他元素调整大小应该保持这个贪婪div在正确的状态。目前我唯一的解决方案是在幻灯片切换和浏览器调整大小上触发我自己的调整大小方法以纠正高度。

谢谢。

Answer 1

You should specify the height as 100% to the element and also to the body and html

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

body, html {
    height:100%;
}

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

Answer 2

Basically it is collapsing to fit content, not expanding to fit the page. You can also put a wrapper div around the divs with position: absolute and height: & width: 100%

Updated fiddle: 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/