CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
nlemmon
nlemmon

Reputation: 25

Content container not resizing to fit content

I've been banging my head against a wall trying to figure this out; http://nicklemmon.com/lily

For some reason the height of the .content div won't adjust to fit its contents! I can make the height of .content greater than 100%, but that kind of defeats the purpose of a fluid layout. This is just a random site I was working on to learn more about CSS animations, yet I've run in to this silly barrier on the way.

Help!

Upvotes: 0

Views: 3212

Answers (2)

Phani
Phani

Reputation: 861

you have a height of 100vh, remove it and you should be fine.

Update(making left column height equal to right column height)

As it appears, there seems to be no straightforward way to adjust left column to same height as right column using pure CSS, you can do a workaround in a number of different ways, best way I would suggest is to use Javascript/jQuery.

//HTML
<div class="moving-right big-lefty col-md-3">

</div>
<div class="big-righty col-md-9">

</div>

//jQuery to use on document ready.
$(".big-lefty").height($(".big-righty").height());

you might want to try another CSS solution that did not work in your case when I tried it on chrome, using inspector. you might want to play with it.

Have .content as display:table-row and .big-lefty and big-righty as display:table-cell

Upvotes: 1

jleggio
jleggio

Reputation: 1286

overflow:auto should do the trick for you.

.content{
    overflow:auto;
}

Upvotes: 2

Related Questions