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

Scrollbar without fixed height/Dynamic height with scrollbar

提问by GuillaumeS

I have this HTML structure:

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

I want to have the three parts inside the main part (#body) without overflow. So I need a scroll bar in the middle part.

我想让主要部分（#body）中的三个部分没有溢出。所以我需要在中间部分有一个滚动条。

I tried this CSS:

我试过这个CSS：

#content{
    border: red solid 1px;
    overflow-y: auto;
}

And this:

和这个：

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

But neither of them work.

但它们都不起作用。

I made an example at JSFiddle.

我在JSFiddle做了一个例子。

Can I do this with only CSS and HTML? I'd prefer to avoid Javascript.

我可以只用 CSS 和 HTML 来做到这一点吗？我宁愿避免使用 Javascript。

回答by mtyaka

Flexbox is a modern alternative that lets you do this without fixed heights or JavaScript.

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

Setting display: flex; flex-direction: column;on the container and flex-shrink: 0;on the header and footer divs does the trick:

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

HTML:

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:

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

回答by Sanchi Girotra

Use this:

用这个：

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

Try to avoid fixed height

尽量避免固定高度

回答by El Ghandor Yasser

I have Similar issue with PrimeNG p_Dialog content and i fixed by below style for the contentStyle

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

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

回答by Philip Bevan

You will have to specify a fixed height, you cannot use 100% because there is nothing for this to be compared to, as in height=100%of what?

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

Edited fiddle:

编辑小提琴：

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

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

回答by user4148647

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

here's the css code

这是 css 代码

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

here's the demo JSFIDDLE

这是演示JSFIDDLE

回答by Philip Bevan

The JS answer to this question is:

JS对这个问题的回答是：

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

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

or something similar

或类似的东西

回答by Benjamin

A quick, clean approach using very little JS and CSS padding: http://jsfiddle.net/benjamincharity/ZcTsT/14/

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

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

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

回答by Luis

I don't know if I got it right, but does thissolve your problem?

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

I just changed the overflow-y: scroll;

我刚刚改变了 overflow-y: scroll;

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

Edited

已编辑

Then try to use percentage values like this: http://jsfiddle.net/6WAnd/19/

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

CSSmarkup:

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

回答by Uttara

Use this:

用这个：

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

回答by Aseem

With display grid you can dynamically adjust height of each section.

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

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

Add the above code and you will get desired results.

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

Sometimes when many levels of grids are involved css wont restrict your #content to 1fr. In such scenarios use:

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

#content{
  max-height:100%;
}