不带固定高度的滚动条/带滚动条的动态高度答案

【问题标题】：Scrollbar without fixed height/Dynamic height with scrollbar不带固定高度的滚动条/带滚动条的动态高度
【发布时间】：2012-06-14 09:36:40
【问题描述】：

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

【问题讨论】：

标签： html css scrollbar

【解决方案1】：

Flexbox 是一种现代替代方案，让您无需固定高度或 JavaScript 即可做到这一点。

在容器上设置 display: flex; flex-direction: column; 并在页眉和页脚 div 上设置 flex-shrink: 0; 可以解决问题：

HTML：

<div id="body">
    <div id="head">
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic 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>  
</div>

CSS：

#body {
    position: absolute;
    top: 150px;
    left: 150px;
    height: 300px;
    width: 500px;
    border: black dashed 2px;
    display: flex;
    flex-direction: column;
}

#head {
    border: green solid 1px;
    flex-shrink: 0;
}

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

#foot {
    border: blue solid 1px;
    height: 50px;
    flex-shrink: 0;
}

【讨论】：

我认为这个回复应该被接受为CSS3的答案。
我认为这不是正确的答案。如果没有固定的 body 元素高度，它将无法工作。
@Equanox 容器的有限高度是重点，否则所有三个部分都将简单地垂直扩展，并且不需要滚动条。请注意，它可以是max-height，而不是固定的height。
你还是在body上使用固定高度。
这里的要点是#content元素上没有固定的高度。 #body 元素上的固定高度只是为了证明#content div 在高度受限时会自动缩小，但您也可以从#body 中删除固定高度，或者将其替换为max-height: 100% 之类的东西.

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用这个：

style="height: 150px; max-height: 300px; overflow: auto;"

固定一个高度，它将是默认高度，然后滚动条来访问整个高度

【讨论】：

只有在高度设置正确时才能滚动？它不适用于单独使用 max-height。

【解决方案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

【讨论】：

效果很好！这就是我要找的！

【解决方案5】：

你必须指定一个固定的高度，你不能使用 100%，因为没有什么可以比较的，就像height=100% 中的什么？

编辑过的小提琴：

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

【讨论】：

你是对的，它不是真正的 100%，但我希望 3 div（头部、内容和脚）占据具有固定大小的身体部分的 100% 高度。例如，我制作了一张图片：img15.hostingpics.net/pics/986131examplepanel.png
你的身体或头部有固定的高度吗？
只有身体有固定的高度。头部必须显示全部，在这种情况下jsfiddle.net/6WAnd/11，头部在#content 部分溢出
如果没有 JS，你会发现在一个固定的身体中很难将两个动态高度部分放在彼此之上！！
height=100% 的另一个 div，有什么问题？没有它，这个插件毫无用处。我们需要响应

【解决方案6】：

这个问题的 JS 答案是：

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

或类似的东西

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

扩展@mtyaka 使用 flexbox 的答案，如果你的可滚动在 dom 中很深，需要对所有父元素使用溢出：自动/隐藏，直到我们得到一个固定的高度

jsfiddle https://jsfiddle.net/rohilaharsh/cuazdnkh/1/

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Container</title>
</head>
<body>
    <div class="one">
    One
        <div class="two">
    Two
            <div class="three">
      Three
                <div class="table">
          Table
                    <div class="header">Table Header</div>
                    <div class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure maiores corporis quisquam enim at nam earum non atque dolorum nulla quidem perferendis, porro eveniet! Quisquam, fugit ex aspernatur, aliquid necessitatibus amet aperiam pariatur facilis suscipit ea dolorum qui ratione assumenda eum minima. At a ullam magnam eveniet, hic sit quis dicta perferendis excepturi nemo voluptate ipsum doloremque expedita illo dolor voluptates culpa consequuntur quaerat porro reprehenderit ab alias! Maxime reprehenderit nihil doloribus exercitationem, cupiditate quasi dolorum voluptas repellendus vel fugit incidunt praesentium molestias modi numquam! Quo porro laudantium aperiam suscipit, molestiae quibusdam veniam cum nam fuga facere fugit quisquam distinctio!</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

html {
  height: 100%;
}

html, body, .one,.two,.three,.table {
  display: flex;
  flex-direction: column;
  
  /* important */
  overflow: hidden;
  
  flex: 1;
  margin: 0;
}

.body {
  width: 200px;
  overflow: auto;
}

【讨论】：

非常感谢您的提示！ :)

【解决方案9】：

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

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

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

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

#content{
  max-height:100%;
}

【讨论】：

【解决方案10】：

我不知道我说的对不对，但是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%;
}

【讨论】：

但我无法设置#head 和#content 的大小。我希望#content 和#head 填充所有主 div (#body)。我只是制作一张图片来说明它：img15.hostingpics.net/pics/986131examplepanel.png
此解决方案不允许有 2 个具有动态高度的块。如果我在第一部分放了很多文字，它就不起作用：jsfiddle.net/6WAnd/21。我认为@philip-bevan 发现没有 JS 是不可能的。请参阅下面的答案。

【解决方案11】：

使用这个：

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

【讨论】：

除非我更改第一部分，否则它可以工作。尝试大量“
不带滚动条的动态大小
”jsfiddle.net/EKvCw