如何使浮动边栏的父级高度为100％？

Question

这是我的jsFiddle

我想要像上面的布局，但是我不想手动将高度分配给我的侧边栏（就像我现在所做的那样）。 我希望边栏高度相对于其父元素（即内容区域）为100％

<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>

我的CSS

.content-area {
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
float: left;
width: 50px;
height: 310px;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 310px;
background-color: #abcdef;
}

Answer 1

问题在于， min-height不能像height一样工作，因此就侧边栏而言，高度为0。您有两个选择：

1.）在容器div上指定一个高度，然后将侧栏设置为height: 100% 。 这是更新的小提琴 。

2.）将包含div position: relative设置为position: relative ，将侧边栏的position: absolute 。 这应该允许height: 100%与min-height 。 但是，使用此解决方案，您将无法使用float属性，因此对于右侧边栏，您需要设置right: 0 。 查看这个小提琴 ，找到一个可行的示例。

Answer 2

.right-sidebar { float: right; width: 50px; height: auto; background-color: #abcdef; position:relative;}

尝试一下...这是您要拍摄的吗？

Answer 3

将height属性赋予“ .content-area”类，然后将100％的高度应用于边栏。 例如：

.content-area {
min-height: 310px;
background-color: #bbb;
height: 500px;
}
.left-sidebar {
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 100%;
background-color: #abcdef;
}