Question

我有一个包含2个div的div，其中一个具有固定的高度。我想确保第二个div的高度与容器div的高度减去另一个div的高度完全一样多。无法手动设置此高度，因为它通常会调整大小。

<div id="container" style="height: 50%"> 
<div id="header" style="height: 30px;"> 
</div> 
<div id="content"> 
</div> 
</div>

我在调整大小时尝试过jquery，但我认为我写错了：

$(document).on("resize", "#container", function (event) {
    $('#content').height($('#container').height()-$('#header').height());
});

有没有办法（Javascript，CSS）来实现这个目标？

Answer 1

jQuery方法的替代方案是CSS Flexbox：

#container {
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
}

请参阅demo。不幸的是，这只适用于支持最新Flexbox语法的浏览器。（http://caniuse.com/#search=flexbox）使用旧语法也可以向后兼容代码，但会更加复杂。请参阅David Storey在http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/上的文章，了解有关如何执行该操作的更多信息。

Answer 2

您的主要问题似乎是您必须先调整元素的大小，然后继续收听调整大小事件：

function handleResize() {  
   $('#content').height($('#container').innerHeight()-$('#header').height()); 
}

$(window).on("resize", handleResize);

handleResize();

此外，resize事件应直接附加到窗口。

否则，我建议在容器中使用innerHeight()，因为它考虑了填充。

此外，我为您的CSS做了一些修复，以便完全正常工作：

#container {
   position: absolute;
   width: 100%;
   height: 50%;
}

请在此处查看完整的小提琴：http://jsfiddle.net/kjcY9/1/

Answer 3

我有一个纯CSS解决方案，查看Working Fiddle

<强> HTML：

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
</div>

<强> CSS：

#container {
    height: 300px; /*Whatever fixed height you want*/
}
#container:before {
    content:'';
    float: left;
    height: 100%;
}
#header {
    height: 30px;/*Whatever fixed height you want, or not fixed at all*/
    background-color: red;
}
#content {
    background-color: blue;
    /*No height spesified*/
}
#content:after {
    content:'';
    clear: both;
    display: block;
}

CSS / Javascript：根据容器大小保持div大小

3 个答案: