5

我有一个简单的 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 库，它将#contentdiv 附加到输入 div 元素（#container在此示例中），因此我不想过多地摆弄父元素或任何子元素的布局。我不介意使用 JavaScript 动态计算可用高度。

4

7 回答 7

6

溢出问题是由#contentdiv 的 100% 声明引起的。把这个属性拿出来。

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

#container {
  height: 400px;
  position: relative;
}
#content {
  top: 0;
  bottom: 0;
  position: absolute;
}
于 2012-12-26T15:27:38.373 回答
6

使用 Javascript 非常简单。我目前正在我当前的项目中做类似的事情。

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

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

  2. 获取容器中子元素的高度：这是有关如何正确获取 childNodes的链接。这是我要做的：

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

现在您有了容器的高度和从父项顶部到最后一个子项的垂直偏移量加上最后一个子项的高度。

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

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

编辑：概念证明

于 2012-12-26T15:46:22.200 回答
1

在标题和内容之间共享可用容器的高度怎么样？

#container {
  background: #FEE;
  height: 400px;
}
#title {
  border: 1px dotted green;
  height : 20%;
}
#content {
  border: 1px dotted red;
  height: 80%;
}
于 2012-12-26T15:29:59.150 回答
1

如果你使用 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();
});
于 2012-12-26T18:38:04.250 回答
0

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

于 2012-12-26T15:31:34.110 回答
0

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

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

你可以在这里看到它：http: //jsbin.com/amekah/32/

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

于 2012-12-26T15:43:49.457 回答
0

#content实际上具有相同的高度，#container只是它溢出了，#container因为#title已经吃掉了#container's 高度的一些百分比。您可以尝试定位您的元素。

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;
}
于 2012-12-26T15:46:27.410 回答