0

我在这个论坛和许多其他地方搜索了很多解决方案，但找不到优雅的解决方案。有些人建议为此使用表格布局，其他人提出其他建议，但我想要一个干净的解决方案。我在这里使用 twitter bootstrap 是问题所在。

<div class="row">
<div class="col-lg-3">
Side Bar Content Here
</div>

<div class="col-lg-9">
Main Content of the page
</div>
</div>

我在侧栏上使用背景颜色。现在的问题是将侧边栏的高度设置为等于容器的高度，以便侧边栏不会在中间中断。由于右侧的内容可以是从几字到几页的任何内容，我无法将任何固定高度设置为 col-lg-3。由于 webkit 中的错误，Height:100% 不起作用。

我正在寻找一个javascript解决方案或jquery中的东西，它将计算容器div（行）的高度并将该高度设置为col-lg-3，以便背景从上到下覆盖。这是许多人面临的问题，我看到很多问题没有一些非常有用的答案。所以这会阻止很多人。

干杯艾哈迈尔

4

2 回答 2

3 
.row{
position:relative;
}
.col-lg-3{
position:absolute;
height:100%;
}
于 2013-08-20T17:45:18.247 回答
2

编辑：

如果你不关心使用 js，你可以使用：

var rowheight = $(".row").height();获取行高；

并使用：$(".row div").height(rowheight);应用它的子 div

小提琴： http: //fiddle.jshell.net/MtD6Q

于 2013-08-20T17:47:07.027 回答