CSS如何填充容器的高度？ [英] CSS how to fill height of container?

问题描述

我有一个容器，里面有两个div：

容器的高度固定为500px。
我不知道头的大小，但我想填充所有的容器高度与身体。
我尝试将此高度值设置为body：

• 100％ ，因为正文从其父元素（容器）获得高度为500像素并溢出。


• 自动：正文可能为空或仅有一些短的内容

如何用接头体填充容器？

这是一个例子：

  #body {height 100％; } 
  

https://jsfiddle.net/s2ems5hm/1/

解决方案

code> display：table / table-row ：

  html { sizing：border-box;} *，*：before，*：after {box-sizing：inherit;} body {margin：0;}。 width：100％; height：500px; background-color：red; padding：0 10px;}。head，.body {display：table-row;} head {background-color：blue;} body {background-color：yellow; height：100％;}  

 < div class =容器> < div class =head>一些头< / div> < div class =body> foobar< /< div>< / div>  

$ b

JSFiddle

此外，我使用盒子大小：border-box 。

I have a container and two div inside it:

The container has a fixed 500px height. I don't know head's size, but I want to fill all the container height with body. I tried to set this height value to body:

• 100%: doesn't work, because the body get height of 500px from its parent (container) and overflow.
• auto: body may be empty or only with some short content and in this case the body height will be lower than free container space.

How to fill the container with a fitting body?

This is the fiddle with the example:

#body{ height 100%; }

https://jsfiddle.net/s2ems5hm/1/

解决方案

It's possible with display: table/table-row:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body{
    margin: 0;
}

.container{
    display:table;
    width: 100%;
    height: 500px;
    background-color: red;
    padding: 0 10px;
}

.head, .body{
    display: table-row;
}

.head{
    background-color: blue;
}

.body{
    background-color: yellow;
    height: 100%;
}

<div class="container">
    <div class="head">some head</div>
    <div class="body">foobar</<div>
</div>

JSFiddle

Also, I used box-sizing: border-box.

这篇关于CSS如何填充容器的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！