Question

我有一个简单的div设置：

<div id="container">
    <div id="title"><h4>Title</h4></div>
    <div id="content"></div>
</div>

#container元素设置为固定高度。我想#content我们所有可用的高度，但我没有找到一个干净的跨浏览器方式来做到这一点。这是CSS：

div {
  width: 100%;
}
#container {
  height: 400px;
}
#content {
  height: 100%;
}

但是这会导致#content与#container具有相同的高度并溢出其父级。

可以在http://jsbin.com/amekah/2/edit看到一个实例。

我应该注意到我正在编写一个JavaScript库，它将#content div附加到输入div元素（在此示例中为#container），因此我不想过多地使用父元素或任何子元素的布局。我不介意使用JavaScript动态计算可用高度。

Answer 1

溢出问题是由#content div的100％声明引起的。带上这家酒店。

如果您希望#content div具有100％的高度，并且与标题div重叠，那么您必须使用绝对位置。

#container {
  height: 400px;
  position: relative;
}
#content {
  top: 0;
  bottom: 0;
  position: absolute;
}

Answer 2

使用Javascript轻松自如。我目前在我当前的项目中正在做类似的事情。

获取容器的高度：elem.offsetHeight其中elem是指向对象的javascript指针。在您的示例中，这将是：

var containerHeight = document.getElementById('container').offsetHeight。

获取容器中子元素的高度：这是how to properly get childNodes上的链接。这就是我要做的事情：

var lastChild = elem.childNodes[elem.childNodes.length - 1];
var verticalOffset = lastChild.offsetTop + lastChild.offsetHeight;

现在您拥有容器的高度以及从父级顶部到最后一个子级的垂直偏移量加上最后一个子级的高度。

剩下要做的就是计算差异并将其指定为#content的高度。

document.getElementById('content').style.height = (containerHeight - verticalOffset) + "px";

编辑：Proof of Concept

Answer 3

如何在标题和内容之间共享可用容器的高度？

#container {
  background: #FEE;
  height: 400px;
}
#title {
  border: 1px dotted green;
  height : 20%;
}
#content {
  border: 1px dotted red;
  height: 80%;
}

Answer 4

如果你使用jQuery会更容易：

function setHeight() {
  // using outer height to get margins and padding into account,
  // see http://jqapi.com/#p=outerHeight
  var titleHeight = $("#title").outerHeight(true), 
      totalHeight = $('#container').outerHeight(true);
  $('#content').outerHeight(totalHeight - titleHeight);      
}
// start on document.ready
$(function() {
  setHeight();
});

Answer 5

如果您不介意使用固定高度作为标题元素，您可以轻松实现此目的。第一步是使#container位置相对，然后内容可以具有绝对位置，底部设置为0，顶部设置为标题的高度（参见demo）。

Answer 6

我找到了让#content使用剩余可用高度的方法：

#container { display: table }
#container > div { display: table-row }

您可以在此处查看：http://jsbin.com/amekah/32/

我仍然对它不满意，因为它可能会更改表行没有的其他CSS元素（如边框）。

Answer 7

#content实际上与#container具有相同的高度，但它会溢出#container，因为#title已经占据了#container高度的某些百分比。您可以尝试定位元素。

div {
  width: 100%;
}
#container {
  background: #FEE;
  height: 400px;
  position: relative;
}
#title {
  border: 1px dotted green;
  position: relative;
  z-index: 1; /* if you don't want #content overlapping with this element */
}
#content {
  border: 1px dotted green;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

在父div中最大化子div的高度

7 个答案: