如何使浮动侧边栏的高度为其父侧边栏的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。看看这把小提琴的工作例子。

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;
}