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

我想创建到divs宽度的外部容器设置为1000px和内部左右容器各为50%。现在我已经使用这个代码我如何确保没有内容的div将获得父div的高度？

.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％的宽度（即使它们是空的）？谢谢。

来源

2014-10-07 designerNProgrammer

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

将 在你的DIV
您的div设置一个height
上设置一个padding您DIV

这里的另一个伎俩我想，如果你不使用这些div的，:after伪元素：

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

来源

2014-10-27 12:07:13 zessx

您可以使用css tables。

设置在左边和右边的div都display:table-cell将确保每一个得到高度相等

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>

（的两个越大，即高度）

来源

2014-10-27 12:29:22 Danield

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

回答

相关问题