Javascript 最大化子div'；父div中的s高度

我有一个简单的div设置：

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

但这会导致

#内容

与

#容器

具有相同的高度，并溢出其父容器

一个活生生的例子可以在网站上看到

---

---

我应该注意，我正在编写一个JavaScript库，它将

#content

div附加到输入div元素（在本例中为

#container

），因此我不想过多地修改父元素或任何子元素的布局。我不介意使用JavaScript动态计算可用高度。

溢出问题是由

#content

div的100%声明引起的。去掉此属性

如果希望内容div在与标题div重叠时具有100%的高度，则必须使用绝对位置

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

---

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

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

---

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

我找到了一种方法来获取

\content

以使用剩余的可用高度：

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

你可以在这里看到：

---

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

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

获取容器的高度：

elem.offsetHeight

其中elem是指向对象的javascript指针。在您的示例中，这将是：

var containerHeight=document.getElementById（'container'）.offsetHeight

获取容器中子元素的高度：下面是一个链接。下面是我要做的：

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

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

剩下要做的就是计算差值并将其指定为

#content

的高度

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

编辑：

#内容

实际上与

#容器

具有相同的高度，只是它溢出了

#容器

，因为

#标题

已经吃掉了

#容器

高度的一些%。您可以尝试定位元素

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;
}

---

使用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();
});

---

是的，这确实可以填充宽度，但不考虑其他子元素（如

#title

div）的高度。#title的高度是固定的吗？不是。问题是我的库事先不知道任何其他元素的CSS。我可以使用JavaScript（见@Akamaozu的答案），但我希望有一个优雅的CSS解决方案我自己也会对一个优雅的CSS解决方案感兴趣。我不喜欢使用Javascript来处理CSS无法处理的事情。祈祷你能找到什么。就像我说的，我正在为我当前的项目使用JS；最好是放弃它，转而使用一些CSS向导。恐怕没有纯粹的CSS解决方案。也许你应该重新考虑定义父母身高的必要性。通常，父级高度将从其子级的所有div继承。如果你是为了美观而设计的，而不是直接设计父div的样式，而不是强迫子div一直向下。我刚刚想到，你可以通过将

div#content

附加到容器中，然后获得它自己的offsetop，并使用它来代替

lastChild.offsetop+lastChild.offsetHeight

。更简单，更准确。这个想法可能还可以，但在目前的形式下，它不起作用。不仅仅是因为lastChild是一个文本节点。但是请查看并解释一下：您在jsfiddle.net中的确切代码：很明显，这种变化是jsbin.com的结果。代码一点也没变；）为了更好的衡量。。。为您的利益在浏览器中创建文件：这里的区别是一个重置样式表，用于规范浏览器之间的奇怪行为（默认前缀等）。一旦所有这些都消除了，一切都会完美运行。我可能会冒昧地假设正在使用一个，但我无法想象任何实际项目在一定程度上不重置浏览器默认样式。是的，包括

body，h4{margin:0}

排序；）

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();
});