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

这个＆＃34;问题＆＃34;不是来自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 tables。

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

<强> FIDDLE

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您也可以这样做：

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

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

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

3 个答案: