滚动条没有在滚动条固定高度/动态高度(Scrollbar without fixed height/

我有这样的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。

Answer 1:

Flexbox将是一个现代化的替代方案，可以让你做到这一点没有固定的高度或JavaScript。

设置display: flex; flex-direction: column; display: flex; flex-direction: column; 在容器和flex-shrink: 0; 在页眉和页脚的div的伎俩：

http://jsfiddle.net/cvmrvfhm/1/

Answer 2:

您必须指定一个固定的高度，因为没有什么因为这是被比作，如不能使用100％ height=100%的什么？

编辑小提琴：

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

Answer 3:

用这个：

风格=“最大高度：300像素;溢出：汽车;”

TTO避免固定的唤起注意

Answer 4:

 <div id="scroll">
    <p>Try to add more text</p>
 </div>

这里的CSS代码

#scroll {
   overflow-y:auto;
   height:auto;
   max-height:200px;
   border:1px solid black;
   width:300px;
 }

这里的演示的jsfiddle

Answer 5:

在JS这个问题的答案是：

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

或类似的东西

Answer 6:

使用非常少的JS和CSS填充一个快速，干净的方法： http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(),
    footerHeight = $('#footer').height();

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});

Answer 7:

用这个：

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }

Answer 8:

我也有类似的问题与PrimeNG p_Dialog内容和我的contentStyle固定由下面的风格

height: 'calc(100vh - 127px)'

Answer 9:

随着显示器网格可以动态地调整各部分的高度。

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

添加上面的代码，你会得到想要的结果。

有时，当电网的多层次参与的CSS不会限制你的＃内容到1FR。 在这样的情况下使用：

#content{
  max-height:100%;
}

Answer 10:

如果你想拥有垂直滚动，你需要涉及到在一定程度上固定的高度。 如果你不想设置固定高度的问题，或者它的父元素上，还有另一种选择 - 以固定的高度设置为它的兄弟姐妹。 所以，那么你将不得不让说，一些兄弟姐妹在总结200像素的高度和你的元素将有height: calc(100% - 200px); 通过这种方式，你正在你的元素的高度动态的，有什么需要使用overflow-y: auto; 并获得所需的滚动。

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

 #body { width: 300px; border: black dashed 2px; height: 400px; /*this is need only for the sake of the example. In the real code you will have height set by some ascendant element or at last throght the chain by the window */ overflow: hidden; } #head { height: 150px; background: red; } #content{ overflow-y: auto; height: calc(100% - 200px) } #foot { height: 50px; background: blue; } 

Answer 11:

我不知道如果我这样做是正确的，但确实这个解决问题了吗？

我只是改变了overflow-y: scroll;

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

编辑

然后尝试使用百分比值是这样的： http://jsfiddle.net/6WAnd/19/

CSS标记：

#body {
    position: absolute;
    top; 150px;
    left: 150px;
    height: 98%;
    width: 500px;
    border: black dashed 2px;
}    
#head {
    border: green solid 1px;
    height: 15%;
}
#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 70%;
}
#foot {
    border: blue solid 1px;
    height: 15%;
}

文章来源: Scrollbar without fixed height/Dynamic height with scrollbar