如何给浮动侧边栏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: absolute.这应该允许height: 100%使用min-height.但是,使用此解决方案您无法使用该float属性,因此对于右侧边栏,您需要进行设置right: 0.看看这个小提琴是否有一个实例.