如何确保没有内容的div将获得父div的高度

Question

我正在尝试创建宽度为divs的外部容器，将其设置为1000px，将内部左右容器分别创建为50%。现在我已经使用了这个代码

.leftNav {
    @include span-columns( 5 of 10);
    background-color:silver;
    color:white;
}
.rightNav {
    @include span-columns( 5 of 10);
    background-color:silver;
    color:white;
}

现在不知怎么的，如果我不在左边的nav上放任何东西，右边的nav会占据100%的宽度如何设置leftnav或rightnav以保持至少50%的宽度，即使它们是空的？谢谢

Answer 1

这个"问题"不是来自Neat，而是来自CSS本身。要显示，一个空元素需要有一个高度。您可以使用以下技巧之一：

• 将 放入您的div
• 在div上设置height
• 在div上设置padding

如果您没有在这些div:上使用:after伪元素，这里还有另一个我喜欢的技巧

.leftNav:after,
.rightNav:after {
    content: '.'; // dot will force its parent to have a height
    opacity: 0;   // dot is hidden
}

Answer 2

您可以使用css表。

在左侧和右侧div上设置display:table-cell将确保每个div的高度相等（即两个div中较大者的高度）

FIDDLE

.container {
  width: 100%;
  display: table;
}
.left {
  width: 50%;
  display: table-cell;
  background: silver;
}
.right {
  width: 50%;
  display: table-cell;
  background: tomato;
}

<div class="container">
  <div class="left"></div>
  <div class="right">some text</div>
</div>

Answer 3

您还可以执行：

.leftNav:after,
.rightNav:after {
  content: '';
  display: inline-block;
}

然后，您就不必处理任何可能会让其他人在查看您的代码时感到困惑的点。