自动高度 div 溢出并在需要时滚动答案

【问题标题】：Auto height div with overflow and scroll when needed自动高度 div 溢出并在需要时滚动
【发布时间】：2012-04-26 16:11:02
【问题描述】：

我正在尝试制作一个没有垂直滚动页面的网站，但我需要其中一个 DIV 我必须垂直扩展到页面底部（最多），并且当它的内容不适合，该 div 应该创建一个垂直滚动条。

我已经在this fiddle 中找到了 div inside 的 css，在需要时创建滚动条。我还发现how to make 容器 div 会增长到完全占据它在页面中的垂直空间。我就是不能让他们一起锻炼！

请记住，在 jsfiddle 中，您将无法查看整个网站的内容，从这个意义上说，您从第二个 fiddle 获得的内容并不能真正显示正在执行的操作，但它可以按我的意图工作不过。

只是另一个注意事项：由于它们是不同的小提琴，第一个小提琴中的 id#container div 是第二个示例的 id#dcontent div。

还有一件事：对于一种内容，此 div 将垂直滚动，但对于其他类型的内容，我希望它水平滚动，因为它将有一个产品“滑块”在此 DIV 内水平显示元素.

请也看看这张照片，因为它可能更容易理解我想说的话：PICTURE

我尝试寻找有关这些主题的其他问题，但似乎没有一个涵盖我试图解决的所有方面......：S

如果我可以提供其他东西来帮助您/我 :) 弄清楚，请告诉我！

谢谢！

EDIT1：修正错别字

EDIT2：添加图片说明

【问题讨论】：

标签： html css scroll overflow

【解决方案1】：

我很惊讶还没有人提到calc()。

我无法从你的小提琴中找出你的具体情况，但我理解你的问题：你想要一个仍然可以使用 overflow-y: auto 的 height: 100% 容器。

这不是开箱即用的，因为overflow 需要一些硬编码的大小约束来知道它应该何时开始处理溢出。所以，如果你选择height: 100px，它会按预期工作。

好消息是that calc() can help，但它不像height: 100%那么简单。

calc() 允许您组合任意度量单位。

因此，对于您在图片中描述的情况，您包括：

由于粉红色 div 上方和下方的所有元素都具有已知高度（比如说，200px 的总高度），您可以使用calc 来确定 ole pinky 的高度：

height: calc(100vh - 200px);

或者，'高度是视图高度的 100% 减去 200 像素。'

那么，overflow-y: auto 应该像魅力一样工作。

【讨论】：

当没有其他方法正常工作时，这为我做到了。谢谢！
calc() 不是纯 CSS 的完美解决方案：如果其他元素大小发生变化，布局将被破坏。换句话说，单一事实来源原则没有得到尊重。我已经发布了另一个解决方案。
您仍在使用硬编码值 (200px)...

【解决方案2】：

好吧，经过长时间的研究，我找到了一种解决方法，可以满足我的需求： http://jsfiddle.net/CqB3d/25/

CSS：

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}

#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML：

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

可能还不能用于水平的东西，但是，它正在进行中！

我基本上放弃了“inception” box-inside-boxes-inside-boxes 模型，并使用具有动态高度和溢出属性的固定定位。

希望这对以后发现问题的人有所帮助！

编辑：这是最终答案。

【讨论】：

我看到顶部和底部的值是固定的，可能不适合动态元素。
此方案使用固定位置，强烈不推荐。

【解决方案3】：

要点快速解答

与@Joum 的最佳选择答案几乎相同，以加快您尝试获得已发布问题的答案的任务，并节省解读语法中发生的事情的时间--

回答

将位置属性设置为固定，将顶部和底部属性设置为您希望与其父元素相比具有“自动”大小的元素或 div，然后将溢出设置为隐藏。

.YourClass && || #YourId{
   position:fixed;
   top:10px;
   bottom:10px;
   width:100%; //Do not forget width
   overflow-y:auto;
}

哇！这就是您希望根据屏幕尺寸和/或动态传入内容具有动态高度同时保持滚动机会的特殊元素所需的全部内容。

【讨论】：

【解决方案4】：

您可以只需使用 flexboxes 和 overflow 属性。

即使父身高也被计算。

详情请见this answer或JSFiddle。

【讨论】：

【解决方案5】：

试试这个：
CSS：

#content {
  margin: 0 auto;
  border: 1px solid red;
  width:800px;
  position:absolute;
  bottom:0px;
  top:0px;
  overflow:auto
}

HTML：

<body>
<div id="content">
...content goes here...
</div>
<body>

如果你不喜欢这种情况下的绝对定位，可以尝试为这个设置一个父子 div，两者都使用position:relative。

编辑：下面应该可以工作（我暂时将 css 内联）：

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>

【讨论】：

这适用于带有内容的 div 的 inside 并且它确实会调整大小以占用可用的垂直空间，但我不会 grow 在容器内，因为我需要它......顺便说一句，我正在尝试你的编辑......问题是你的第二个代码示例中的父 div 在我的代码中的另一个容器内......检查图片上面有更清晰的描述...还有什么想法吗？
yup... 不工作：S 这里是你的测试结果的小提琴：jsfiddle.net/CqB3d 红色边框 div 应该在黑条之间保持溢出并显示垂直滚动条。如果分辨率不同，只有带有红色边框的 div 应该 grow 来改变大小......我完全迷失在这里：S 不知道它是否是 height:auto 设置以这种方式表现，或者如果它与 div 的内容有关...

【解决方案6】：

这是一个使用 FlexBox 的水平解决方案，没有讨厌的absolute 定位。

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#left,
#right {
  flex-grow: 1;
}

#left {
  background-color: lightgrey;
  flex-basis: 33%;
  flex-shrink: 0;
}

#right {
  background-color: aliceblue;
  display: flex;
  flex-direction: row;
  flex-basis: 66%;
  overflow: scroll;   /* other browsers */
  overflow: overlay;  /* Chrome */
}

.item {
  width: 150px;
  background-color: darkseagreen;
  flex-shrink: 0;
  margin-left: 10px;
}

<html>

<body>
  <section id="left"></section>
  <section id="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>

</html>

【讨论】：

【解决方案7】：

这就是我到目前为止所做的。我想这就是你想要拔出的东西。唯一的问题是我仍然无法为容器 DIV 分配适当的高度。

JSFIDDLE

HTML：

<div id="container">
    <div id="header">HEADER</div>
    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>

还有 CSS：

html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
#container {
    width:600px;
    height:50%;
    text-align:center;
    display:block;
    position:relative;
}
#header {
    background:#069;
    text-align:center;
    width:100%;
    height:80px;
}
#fixeddiv-top {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}
#content-container {
    height:100%;
}
#content {
    text-align:center;
    height:100%;
    background:#F00;
    margin:0 auto;
    overflow:auto;
}
#fixeddiv-bottom {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}

【讨论】：

jsfiddle 链接未找到。应该在您的答案中发布代码而不仅仅是链接
@AdamH 当时不是必需的。如果您仔细查看我的帖子，您会发现我在您投反对票之前 4 年多就添加了该评论。
谢谢你，@AdamH，我很欣赏这个手势 :) 正如你所见，我修复了 Fiddle 链接，并按照你的建议将代码添加到我的评论中。

【解决方案8】：

.content {
   height: auto;
   max-height: 785px;
   overflow-y: auto;
}

我认为这也应该有效。 .content div 只会在 div 内容呈现超过 max-height 的值时显示滚动条。

【讨论】：

【解决方案9】：

$(document).ready(function() {
//Fix dropdown-menu box size upto 2 items but above 2 items scroll the menu box
    $("#dropdown").click(function() {
        var maxHeight = 301;
        if ($(".dropdown-menu").height() > maxHeight) { 
            maxHeight = 302;
            $(".dropdown-menu").height(maxHeight);
            $(".dropdown-menu").css({'overflow-y':'scroll'});
        } else {
            $(".dropdown-menu").height();
            $(".dropdown-menu").css({'overflow-y':'hidden'});
        }
    });
});

【讨论】：

【解决方案10】：

我认为这很容易。只需使用这个 css

.content {
   width: 100%;
   height:(what u wanna give);
   float: left;
   position: fixed;
   overflow: auto;
   overflow-y: auto;
   overflow-x: none;
}

在此之后，只需将这个类给你的 div 就像 -

<div class="content">your stuff goes in...</div>

【讨论】：