CODEWITHSUNDEEP
htmlcss
Elaine Marley
Elaine Marley

Reputation: 2243

Div overflow inside another div

I have this:

<div class="one">
    <h2>Title that can be quite long and I don't know it's height</h2>
    <div class="two">Content that can overflow and that needs to be scrolled (but the title needs to remain up so that won't scroll</div>
</div>

And this CSS:

.one{height: 250px; width: 120px;}
.two{overflow:auto;}

But I can't get .two to do the scroll. I don't know the height of .two or h2. Also I only want .two to do the scroll.

Upvotes: 2

Views: 3265

Answers (4)

Ivan Ivanov
Ivan Ivanov

Reputation: 2052

I've made the http://jsfiddle.net/zm8Lj/ for you. Please take a look.

Upvotes: 3

Jean-Charles
Jean-Charles

Reputation: 1720

You have to specify an heigth for two. Calculate the div.two height depending on the h2 height.

$('div.two').height($('div.one').height()-$('h2').height());

See it in action : http://jsfiddle.net/FQwbG/

Upvotes: 1

legiero
legiero

Reputation: 374

If you wan't your title don't move from top, wrap it with div and give it position: fixed; top: 0px; lwft: 0px;

Upvotes: 0

ruslyrossi
ruslyrossi

Reputation: 366

you mean this ?

.two{overflow:auto; height:200px;}

Upvotes: 1

Related Questions