html - 如何为浮动侧边栏提供其父级的 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为 haveposition: relative和侧边栏设置为 have 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

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