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

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

编辑小提琴：

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

Answer 3

使用此：

style =＆＃34; max-height：300px;溢出：自动;＆＃34;

避免固定高度

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

扩展@mtyaka 使用 flexbox 的答案，如果您的可滚动对象位于 dom 深处，则需要对所有父元素使用 overflow: auto/hidden，直到我们获得固定高度

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

Answer 8

使用此：

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

Answer 9

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

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

Answer 10

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

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

添加上面的代码，您将获得理想的结果。

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

#content{
  max-height:100%;
}

Answer 11

如果要垂直滚动，则需要一定程度的固定高度。如果您不想在相关元素或其父元素上设置固定高度，则还有另一种选择-为其兄弟元素设置固定高度。因此，在汇总中，您将说出一些高度为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 12

我不知道我是否做得对，但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%;
}

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

12 个答案: