css - 让div填充容器的宽度

Question

我有一个动态生成的容器。它最终会在其中包含一个 div，或在其中包含两个 div。

第一个 div 可能存在也可能不存在，但第二个 div 始终存在。我需要第二个 div 始终填满整个宽度。

当第一个 div 存在时它会填充宽度，但当它不存在时它不会一直填充。

这是我当前使用的 CSS:

.div1 {
  display: table-cell;
}
.div2 {
  display: table-cell;
  width: 100%;
  vertical-align: top;
}

注意:这两个 div 都有表单字段和标签。

Answer 1

添加具有display:table 样式的父元素:

.table{
    display:table;
    width: 100%;
    height: 200px;
}

.div1 {
  display: table-cell;
  background-color: red;
}

.div2 {
  display: table-cell;
  width: 100%;
  vertical-align: top;
  background-color: blue;
}

<h2>div1 has content</h2>
<div class="table">
    <div class="div1">some content</div>
    <div class="div2"></div>
</div>

<br/>

<h2>div1 has no content</h2>
<div class="table">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

<br/>

<h2>no div1</h2>
<div class="table">
    <div class="div2"></div>
</div>

JSFiddle