滚动条没有固定高度/动态高度与滚动条 [英] Scrollbar without fixed height/Dynamic height with scrollbar

问题描述

我有这个HTML结构：

 < div id =body 
< div id =head> 
< p>无滚动条的动态高度< / p> 
< / div> 
< div id =content> 
< p>使用滚动条的动态高度< / p> 
< / div> 
< div id =foot> 
< p>固定高度（无滚动条）< / p> 
< / div> 
< / div> 
  

我想在主体部分（#body）中有三个部分没有溢出。

$ b

我试过这个CSS：

code> #content {
border：red solid 1px;
overflow-y：auto;
}

而且：

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

但它们都不工作。

我在 JSFiddle 做了个例子。

我可以这只用CSS和HTML？

解决方案

您必须指定固定的高度，但不能使用100％，因为

编辑的小提琴：

p>

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

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.

解决方案

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/

这篇关于滚动条没有固定高度/动态高度与滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！