Question

我们说我有一个div容器，该容器由第三方JavaScript代码动态调整大小。

<div class="container">
    <div class="header">
        ...some content...
    </div>

    <div class="body">
        ...body content...
    </div>
</div>

有没有CSS方法如何让body div传播父容器的所有可用水平和垂直空间？

请注意，我无法在标题div上设置任何固定高度，因为其内容是动态生成的，并且它的高度并不总是相同。

Answer 1

即使容器的高度未明确知道/设置，

CSS Flexbox也可以这样做：

＆＃13;

.container {
    width: 348px; /* random value to simulate being set by JavaScript */
    border: 1px solid black; /* this is here just for demonstration purposes */
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}

.body {
    background: tomato;
    height: 100%;
}

＆＃13;

<div class="container">
    <div class="header">
        ...some content...
    </div>

    <div class="body">
        ...body content...
        <br/>
        more.
        <p>asdf yeah a paragraph</p>
    </div>
</div>

＆＃13;

Answer 2

如果高度已知，

flexbox可以做到这一点。

.container {
    display: flex;
    flex-direction: column;
    height: 150px; /* or whatever including % values */
}

.header {
    background: plum;
}

.body {
    flex:1
}

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  height: 150px;
  margin-bottom: 10px;
}
.header {
  background: plum;
}
.body {
  background: #c0ffee;
  flex: 1
}

＆＃13;

<div class="container">
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur vitae laudantium rerum provident delectus ipsa sed, fugiat exercitationem distinctio, asperiores assumenda, eius esse ut. Consequuntur!
  </div>

  <div class="body">

  </div>
</div>

<div class="container">
  <div class="header">
    Lorem ipsum dolor sit amet
  </div>

  <div class="body">

  </div>
</div>

＆＃13;

JSfiddle Demo，屏幕高度为100％。

如何传播div以覆盖父容器中的可用空间？

2 个答案: