没有固定高度的滚动条/带滚动条的动态高度

Question

我有这个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;，在页眉和页脚div上设置flex-shrink: 0;可以解决问题：

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

Answer 2

如果您想要垂直滚动，则需要在某种程度上涉及固定高度。如果您不想在相关元素或其父元素上设置固定高度，则还有另一个选项 - 将固定高度设置为其兄弟元素。那么你就可以说一些高度为200px的兄弟姐妹，你的元素会有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 3

我不知道我是否做对了，但是this能解决你的问题吗？

我刚改变了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%;
}

Answer 4

你将不得不指定一个固定的高度，你不能使用100％，因为没有什么可以比较，如在height=100%什么？

编辑小提琴：

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

Answer 5

用这个：

style =“max-height：300px; overflow：auto;”

避免固定高度

Answer 6

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

JS对这个问题的回答是：

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

或类似的东西

Answer 8

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

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

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

Answer 9

用这个：

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

Answer 10

我有与PrimeNG p_Dialog内容类似的问题，我通过以下样式修复了contentStyle

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

Answer 11

使用显示网格，您可以动态调整每个部分的高度。

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

添加上面的代码，您将获得所需的结果。

有时当涉及多个级别的网格时，css不会将你的#content限制为1fr。在这种情况下使用：

#content{
  max-height:100%;
}