使内部div与容器的高度相同

时间:2013-08-20 17:42:46

标签: javascript jquery html css

我已经在这个论坛和许多其他地方搜索了很多解决方案,但找不到优雅的解决方案。有些人建议使用表格布局为其他人提出别的建议,但我想要一个干净的解决方案。我在这里使用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中的错误,100%不起作用。

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

干杯 艾哈迈尔

2 个答案:

答案 0 :(得分:3)

.row{
position:relative;
}
.col-lg-3{
position:absolute;
height:100%;
}

答案 1 :(得分:2)

编辑:

如果您不关心使用js,可以使用:

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

并使用:$(".row div").height(rowheight);在它的子div上使用

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