CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmar Ali
Ahmar Ali

Reputation: 1068

Make the inside div same height as container

I have searched a lot for the solution on this forum and many other places but can't find an elegant solution. Some people propose that use tabular layout for this others propose something else but I want a clean solution. I am using twitter bootstrap here is the problem.

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

I am using background color on side bar. Now the problem is setting the height of the sidebar equal to the height of the container so that the sidebar doesn't break in the middle. As the content in the right side can be anything from few words to few pages I can't set any fixed height to col-lg-3. Height:100% doesn't work due to bug in webkit.

I am looking for a javascript solution or something in jquery which will calculate height of container div (row) and set that height to col-lg-3 so the background covers from top to bottom. This is the problem many people face and I have seen numerous questions without some very helpful answers. So this will halp a lot of people.

Cheers Ahmar

Upvotes: 0

Views: 3564

Answers (2)

Strobel
Strobel

Reputation: 167

EDIT:

if you don't care about using js, you could use:

var rowheight = $(".row").height(); to get row's height;

And use: $(".row div").height(rowheight); to aply on it's child divs

Fiddle: http://fiddle.jshell.net/MtD6Q

Upvotes: 2

jk jk
jk jk

Reputation: 1075

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

Upvotes: 3

Related Questions