0

我有一个 div，其中包含 2 个 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）来实现这一点？

4

3 回答 3

2

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

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

#content {
  flex: 1;
}

请参阅演示。不幸的是，这只适用于支持最新 Flexbox 语法的浏览器。( http://caniuse.com/#search=flexbox ) 向后兼容的代码也可以使用旧语法，但会涉及更多。有关如何做到这一点的更多信息，请参阅http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/上的 David Storey 的文章。

于 2013-10-13T14:19:40.177 回答
1

我有一个纯 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;
}
于 2013-10-13T14:19:50.613 回答
1

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

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

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

handleResize();

此外，调整大小事件应直接附加到窗口。

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

我还对您的 CSS 进行了一些修复以使其完全正常工作：

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

在这里查看完整的小提琴：http: //jsfiddle.net/kjcY9/1/

于 2013-10-13T14:08:22.853 回答