小编Gui*_*meS的帖子

我有这个HTML结构:

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

我希望主要部分(#body)中的三个部分没有溢出.所以我需要一个中间部分的滚动条.

我试过这个CSS:

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

还有这个:

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

但它们都不起作用.

我在JSFiddle上做了一个例子.

我只能用CSS和HTML做到这一点吗？我宁愿避免使用Javascript.