Html 使div（高度）占据父级剩余高度

Make div (height) occupy parent remaining height

提问by Alvaro

http://jsfiddle.net/S8g4E/

http://jsfiddle.net/S8g4E/

I have a container divwith two children. The first child has a given height. How can I make the second child to occupy the "free space" of the container divwithout giving a specific height?

我有一个div带两个孩子的容器。第一个孩子有一个给定的身高。如何在div不给出特定高度的情况下让第二个孩子占据容器的“自由空间” ？

In the example, the pink divshould occupy also the white space.

在这个例子中，粉红色div也应该占据白色空间。

---

---

Similar to this question: How to make div occupy remaining height?

类似于这个问题：如何让div占据剩余高度？

But I don't want to give position absolute.

但我不想给position absolute。

回答by webdevkit

Expanding the #downchild to fill the remaining space of #containercan be accomplished in various ways depending on the browser support you wish to achieve and whether or not #uphas a defined height.

根据您希望实现的浏览器支持以及是否具有定义的高度#down，#container可以通过多种方式扩展子项以填充剩余空间#up。

Samples

样品

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Grid

网格

CSS's gridlayout offers yet another option, though it may not be as straightforward as the Flexbox model. However, it only requires styling the container element:

CSS 的grid布局提供了另一种选择，尽管它可能不像 Flexbox 模型那么简单。但是，它只需要为容器元素设置样式：

.container { display: grid; grid-template-rows: 100px }

The grid-template-rowsdefines the first row as a fixed 100px height, and the remain rows will automatically stretch to fill the remaining space.

将grid-template-rows第一行定义为固定的 100px 高度，其余行将自动拉伸以填充剩余空间。

I'm pretty sure IE11 requires -ms-prefixes, so make sure to validate the functionality in the browsers you wish to support.

我很确定 IE11 需要-ms-前缀，因此请确保验证您希望支持的浏览器中的功能。

Flexbox

弹性盒

CSS3's Flexible Box Layout Module (flexbox)is now well-supported and can be very easy to implement. Because it is flexible, it even works when #updoes not have a defined height.

CSS3 的弹性框布局模块 ( flexbox)现在得到了很好的支持，并且非常容易实现。因为它很灵活，它甚至可以在#up没有定义高度的情况下工作。

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

It's important to note that IE10 & IE11 support for some flexbox properties can be buggy, and IE9 or below has no support at all.

需要注意的是，IE10 和 IE11 对某些 flexbox 属性的支持可能有问题，而 IE9 或更低版本根本不支持。

Calculated Height

计算高度

Another easy solution is to use the CSS3 calcfunctional unit, as Alvaro points out in his answer, but it requires the height of the first child to be a known value:

另一个简单的解决方案是使用CSS3calc功能单元，正如 Alvaro 在他的回答中指出的那样，但它要求第一个孩子的高度是一个已知值：

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

It is pretty widely supported, with the only notable exceptions being <= IE8 or Safari 5 (no support) and IE9 (partial support). Some other issues include using calcin conjunction with transformor box-shadow, so be sure to test in multiple browsers if that is of concern to you.

它得到了广泛的支持，唯一值得注意的例外是 <= IE8 或 Safari 5（不支持）和 IE9（部分支持）。其他一些问题包括将calc与transform或box-shadow结合使用，因此如果您对此感到担忧，请务必在多个浏览器中进行测试。

Other Alternatives

其他替代品

If older support is needed, you could add height:100%;to #downwill make the pink div full height, with one caveat. It will cause overflow for the container, because #upis pushing it down.

如果需要较旧的支持，您可以添加height:100%;到#down将使粉红色 div 全高，但有一个警告。它会导致容器溢出，因为#up将其向下推。

Therefore, you could add overflow: hidden;to the container to fix that.

因此，您可以添加overflow: hidden;到容器中来解决这个问题。

Alternatively, if the height of #upis fixed, you could position it absolutely within the container, and add a padding-top to #down.

或者，如果 的高度#up是固定的，您可以将其绝对放置在容器内，并添加一个 padding-top 到#down。

And, yet another option would be to use a table display:

而且，另一种选择是使用表格显示：

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}?

回答by Alvaro

Its been almost two years since I asked this question. I just came up with css calc() that resolves this issue I had and thought it would be nice to add it in case someone has the same problem. (By the way I ended up using position absolute).

我问这个问题已经快两年了。我刚刚想出了 css calc() 解决了我遇到的这个问题，并认为如果有人遇到同样的问题，添加它会很好。（顺便说一下，我最终使用了绝对位置）。

http://jsfiddle.net/S8g4E/955/

http://jsfiddle.net/S8g4E/955/

Here is the css

这是css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

And more information about it here: http://css-tricks.com/a-couple-of-use-cases-for-calc/

以及更多关于它的信息：http: //css-tricks.com/a-couple-of-use-cases-for-calc/

Browser support: http://caniuse.com/#feat=calc

浏览器支持：http: //caniuse.com/#feat=calc

回答by T.W.R. Cole

My answer uses only CSS, and it does not use overflow:hidden or display:table-row. It requires that the first child really does have a given height, but in your question you state that only the second child need have its height not specified, so I believe you should find this acceptable.

我的回答只使用 CSS，它不使用溢出：隐藏或显示：表格行。它要求第一个孩子确实具有给定的高度，但是在您的问题中，您指出只有第二个孩子需要未指定其高度，因此我相信您应该认为这是可以接受的。

html

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

css

css

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

http://jsfiddle.net/S8g4E/288/

回答by Dipak

check the demo - http://jsfiddle.net/S8g4E/6/

检查演示 - http://jsfiddle.net/S8g4E/6/

use css -

使用 css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

回答by Josh Mein

Unless I am misunderstanding, you can just add height: 100%;and overflow:hidden;to #down.

除非我误解，否则您可以将height: 100%;和添加overflow:hidden;到#down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}?

Live DEMO

现场演示

Edit: Since you do not want to use overflow:hidden;, you can use display: table;for this scenario; however, it is not supported prior to IE 8. (display: table;support)

编辑：由于您不想使用overflow:hidden;，因此可以display: table;用于此场景；但是，在 IE 8 之前不支持。（display: table;支持）

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}?

Live DEMO

现场演示

Note: You have said that you want the #downheight to be #containerheight minus #upheight. The display:table;solution does exactly that and this jsfiddlewill portray that pretty clearly.

注意：您已经说过您希望#down高度为#container高度减去#up高度。该display:table;解决方案正是这么做的和这个的jsfiddle将描绘那个漂亮的清楚。

回答by biziclop

You can use floats for pushing content down:

您可以使用浮动来向下推内容：

http://jsfiddle.net/S8g4E/5/

http://jsfiddle.net/S8g4E/5/

You have a fixed size container:

您有一个固定大小的容器：

#container {
    width: 300px; height: 300px;
}

Content is allowed to flow next to a float. Unless we set the float to full width:

允许内容在浮动旁边流动。除非我们将浮动设置为全宽：

#up {
    float: left;
    width: 100%;
}

While #upand #downshare the top position, #down's content can only start after the bottom of the floated #up:

while#up和#downshare 顶部位置，#down的内容只能在浮动的底部之后开始#up：

#down {
    height:100%;
}?

回答by N. Kudryavtsev

Abstract

抽象的

I didn't find a fully satisfying answer so I had to find it out myself.

我没有找到一个完全令人满意的答案，所以我不得不自己找出来。

My requirements:

我的要求：

• the element should take exactlythe remaining space either when its content sizeis smaller or biggerthan the remaining space size(and to show scrollbarin the second case);
• the solution should work when the parent height is computed, and not specified;
• calc()should not be usedas the remaining element shouldn't know anythingabout another element sizes;
• modernand familar layout techniquesuch as flexboxesshould be used.

• 该元件应采取准确的剩余空间既可以当其含量大小为更小或更大的比剩余空间大小（并显示滚动条在第二种情况下）;
• 该溶液应该工作时，父高度被计算，并且没有指定;
• calc()不应该被使用，因为剩余的元素不应该知道其他元素的大小；
• 应该使用现代和熟悉的布局技术，例如flexboxes。

---

---

The solution

解决方案

• Turn into flexboxes all direct parents with computed height (if any)and the next parent whose height is specified;
• Specify flex-grow: 1to all direct parents with computed height (if any)and the elementso they will take up all remaining space when the element content size is smaller;
• Specify flex-shrink: 0to all flex items with fixed heightso they won't become smaller when the element content size is bigger than the remaining space size;
• Specify overflow: hiddento all direct parents with computed height (if any)to disable scrolling and forbid displaying overflow content;
• Specify overflow: autoto the elementto enable scrolling inside it.

• 将所有具有计算高度的直接父级（如果有）和指定高度的下一个父级转换为 flexboxes ；
• 指定flex-grow: 1到所有直接父母计算高度（如果有的话）和元素，所以当元素含量尺寸更小，他们会占用所有剩余空间;
• 指定flex-shrink: 0要使用固定的高度所有Flex项目，使他们不会成为当元素含量的大小大于剩余空间大小大小;
• 指定overflow: hidden到所有直接父母计算高度（如果有的话），以禁用滚动和禁止显示溢出的内容;
• 指定overflow: auto给该元素，以使里面滚动。

---

---

JSFiddle (element has direct parents with computed height)

JSFiddle（元素具有计算高度的直接父元素）

JSFiddle (simple case: no direct parents with computed height)

JSFiddle（简单案例：没有计算高度的直接父母）

回答by Jezen Thomas

I'm not sure it can be done purely with CSS, unless you're comfortable in sort of faking it with illusions. Maybe use Josh Mein's answer, and set #containerto overflow:hidden.

我不确定它是否可以完全用 CSS 来完成，除非你很乐意用幻想来伪造它。也许使用 Josh Mein 的答案，然后设置#container为overflow:hidden。

For what it's worth, here's a jQuery solution:

对于它的价值，这是一个 jQuery 解决方案：

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);