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

Maximizing a child div's height within a parent div

提问by Gingi

I have a simple div setup:

我有一个简单的 div 设置：

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

The #containerelement is set to a fixed height. I would like to have #contentus all the available height, but I haven't found a clean cross-browser way to do this. Here is the CSS:

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

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

But this results in #contenthaving the same height as #containerand overflows its parent.

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

A live example can be seen at http://jsbin.com/amekah/2/edit.

在http://jsbin.com/amekah/2/edit 上可以看到一个活生生的例子。

---

---

I should note that I'm writing a JavaScript library that appends the #contentdiv to an input div element (#containerin this example) so I don't want to fiddle too much with the layout of either the parent element or any child elements. I don't mind using JavaScript to calculate the available height dynamically.

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

回答by ProfileTwist

The overflow issues is caused by the 100% declaration for the #contentdiv. Take this property out.

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

If you would like the #content div to have 100% height WHILE overlapping the title div then you must use absolute position.

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

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

回答by akamaozu

Ridiculously easy with Javascript. I'm currently doing something like that on my current project.

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

1. Get the Height of the Container: elem.offsetHeightwhere elem is a javascript pointer to the object. In your example this would be:

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

2. Get the Height of Child Elements in the Container: Here's a link on how to properly get childNodes. Here's what I'd do:

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

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; 
   

Now you have the height of the container AND the vertical offset from the top of the parent to the last child plus the height of the last child.

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

All that's left to do is calculate the difference and assign it as the height of #content.

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

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

EDIT: Proof of Concept

编辑：概念证明

回答by Mladen

Even easier if you use jQuery:

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

回答by Johnbabu Koppolu

What about sharing the available container's height between title and content?

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

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

回答by Sandi Hrvi?

If you don't mind using fixed height for your title element you can easily achieve this. The first step is to make the #container position relative, and then content can have absolute position with bottom set to 0 and top set to height of your title (see demo).

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

回答by Gingi

I found a way to get #contentto use the remainder of the available height:

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

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

You can see it here: http://jsbin.com/amekah/32/

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

I'm still not happy with it because it potentially changes other CSS elements that table rows don't have (like a border).

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

回答by Mark Dee

#contentactually has the same height as #containerexcept that it overflows with #containerbecause #titlealready eats some % of #container's height. You could try positioning your elements.

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