GuillaumeS GuillaumeS - 3 months ago 13
CSS Question

Scrollbar without fixed height/Dynamic height with scrollbar

I have this HTML structure:

<div id="body">
<div id="head">
<p>Dynamic height without scrollbar</p>
</div>
<div id="content">
<p>Dynamic height with scrollbar</p>
</div>
<div id="foot">
<p>Fixed height without scrollbar</p>
</div>
</div>


I want to have the three parts inside the main part (#body) without overflow. So I need a scroll bar in the middle part.

I tried this CSS:

#content{
border: red solid 1px;
overflow-y: auto;
}


And this:

#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}


But neither of them work.

I made an example at JSFiddle.

Can I do this with only CSS and HTML? I'd prefer to avoid Javascript.

Answer

You will have to specify a fixed height, you cannot use 100% because there is nothing for this to be compared to, as in height=100% of what?

Edited fiddle:

http://jsfiddle.net/6WAnd/4/

Comments