如何给浮动侧边栏100％的父级高度？

Question

这是我的jsFiddle

我想要一个像上面这样的布局，但我不想手动为我的侧边栏指定高度（正如我现在所做的那样）。我希望侧边栏高度与其父元素相比是100％，即content-area

<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%。 Here is the updated fiddle

2。）将包含div的{​​{1}}设置为position: relative，将侧边栏设置为position: absolute。这应该允许height: 100%与min-height一起使用。但是，使用此解决方案，您无法使用float属性，因此对于右侧边栏，您需要设置right: 0。 Check out this fiddle是一个有效的例子。

Answer 2

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

试试这个......这就是你要拍的吗？

Answer 3

将“高度”属性赋予“.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;
}