html - 自动高度 div 溢出并在需要时滚动

Question

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

我已经在这个小提琴中找到了 div内部的 css，在需要时创建滚动条。我还想出了如何使容器 div 增长到完全占据它在页面中的垂直空间。我就是不能让他们一起锻炼！

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

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

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

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

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

如果还有什么我可以提供来帮助你/我:)弄清楚，请告诉我！

谢谢！

EDIT1：修正错别字

EDIT2：添加图片进行说明

score 49 · Accepted Answer

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

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

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

好消息是可以calc()提供帮助，但并不像height: 100%.

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

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

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

height: calc(100vh - 200px);

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

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

score 19 · Accepted Answer

好吧，经过长时间的研究，我找到了一种解决方法，可以满足我的需要：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 模型，并使用具有动态高度和溢出属性的固定定位。

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

编辑：这是最终答案。

score 13 · Accepted Answer

快速回答要点

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

回答

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

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

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

score 3 · Accepted Answer

您可以仅使用flexboxes和overflowproperty来做到这一点。

即使也计算了父身高。

有关详细信息，请参阅此答案或JSFiddle。

score 1 · Accepted Answer

试试这个：
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>

score 1 · Accepted Answer

这就是我到目前为止所做的。我想这就是你想要拔出的东西。唯一的问题是我仍然无法为容器 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;
}

score 1 · Accepted Answer

这是一个使用 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>

score 0 · Accepted Answer

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

我认为这也应该有效。仅当.contentdiv 内容呈现超过的值时，div 才会显示滚动条max-height。

score -1 · Accepted Answer

$(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'});
        }
    });
});

score -5 · Accepted Answer

我认为这很容易。只需使用这个 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>

html - 自动高度 div 溢出并在需要时滚动

10 回答 10

Related

Reference