65

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

4

11 回答 11

82

Flexbox 是一种现代替代方案，可让您在没有固定高度或 JavaScript 的情况下执行此操作。

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

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;
}
于 2016-08-24T13:27:55.337 回答
17

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

height: 'calc(100vh - 127px)'
于 2018-10-29T11:53:11.140 回答
11

用这个：

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

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

于 2015-04-23T06:28:06.843 回答
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

于 2014-10-16T07:19:18.303 回答
5

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

编辑小提琴：

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

于 2012-06-11T13:26:19.547 回答
2

JS 对这个问题的回答是：

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

或类似的东西

于 2012-06-11T15:31:48.437 回答
2

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

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

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});
于 2013-04-20T18:32:37.273 回答
2

扩展使用 flexbox 的@mtyaka 答案，如果您的可滚动在 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;
}
于 2021-03-23T12:40:11.723 回答
1

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

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

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

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

#content{
  max-height:100%;
}
于 2019-03-13T07:27:50.203 回答
0

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

我只是改变了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%;
}
于 2012-06-11T13:20:51.010 回答
0

用这个：

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }
于 2012-06-11T13:22:43.493 回答