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

我正在尝试创建

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

或

righnav

以保持至少50%的宽度，即使它们是空的？ 谢谢。

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

• 将
  放入您的div中
• 在div上设置

  高度

• 在div上设置一个

  padding

如果不使用

：在这些div上的

伪元素之后，还有一个我喜欢的技巧：

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

你可以用

设置左侧和右侧div上的

display:table cell

，将确保每个div的高度相等（即两个div中较大者的高度）

.container{
宽度：100%；
显示：表格；
}
.左{
宽度：50%；
显示：表格单元格；
背景：银；
}
.对{
宽度：50%；
显示：表格单元格；
背景：番茄；
}

一些文本

您还可以执行以下操作：

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

---

然后你就不必处理任何可能会让别人看你的代码时感到困惑的点。

这个

帮了我的忙。我想要一个空的div和它不是空的时候一样高。