css - 如何确保没有内容的 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或保持至少 50% 的宽度？rightnav谢谢。

Answer 1

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

• 放入 你的 div
• height在你的 div 上设置一个
• padding在你的 div 上设置一个

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

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

Answer 2

您可以使用css 表。

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

小提琴

.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;
}

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