2

我有两个相邻的浮动 div，希望左边的 div 可以拉伸到右边的任何大小。单独使用css可以吗？

<div class="page">
    <div class="left-sidebar">
    </div>
    <div class="right-content">
    </div>
</div>

.left-sidebar
{
    background: url('ImageUrl') no-repeat right top #F8F1DB;
    float: left;
    width: 203px;
    min-height: 500px;
    height : auto;
}

.right-content
{
    background: #F8F1DB;
    margin-left: 203px;
    min-height: 477px;
}

它最终看起来像这样：

------------------
| | |
| | |
| | |
| | |
| | |
------------------

左侧边栏框架有一个背景图像，应该拉伸到内容框架的任何高度，但是我在实现这一点时遇到了问题。

是否有一种跨浏览器的方法可以使左侧边栏 div 仅使用 css 拉伸与右侧内容框架相同的高度？

4

2 回答 2

8

我能想到的最好的方法是position: absolute在.left-sidebar元素上使用：

.page {
    position: relative; /* causes the left-sidebar to position relative to this element */
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

​.right-content {
    background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */
    margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */
}​

JS 小提琴演示。

针对以下评论进行了编辑：

浮动 div 的两侧都有一个标题和一些空间，所以我不知道要使用的实际顶部/左侧/底部位置。此外，如果右侧内容框架延伸得更长，左侧边栏框架不会随之延伸（将高度：500px 添加到小提琴的右侧内容框架）。

不幸的是，我能看到的唯一其他选择是在.left-sidebar元素内移动.right-content元素，然后以下工作。但是，这对于您的用例可能是不可能的。

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #f90;
}

.right-content {
    position: relative;
    background-color: #f00;
    margin: 0;
    padding: 0 0 0 35%;
}​

JS 小提琴演示。

于 2012-04-26T12:59:26.523 回答
0

这是一个复杂的问题。在这里你有一篇关于它的文章：http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-04-26T12:54:11.393 回答