内部内容与底部对齐时如何显示滚动条？答案

【问题标题】：How to show scrollbar when the inner content is aligned to bottom?内部内容与底部对齐时如何显示滚动条？
【发布时间】：2014-07-22 13:26:44
【问题描述】：

我有两个 div，“外部”和“内部”，如下所示：
http://jsfiddle.net/WVd9Q/2/

[HTML]

<div class="outer">
    <div class="inner">
        <p id="content">Lorem ipsum dolor sit amet...</p>
    </div>
</div>

[CSS]

    .outer {
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        overflow-y:scroll;
        z-index: 100;
    }
  .inner {
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        min-width:400px;
        max-width:800px;
        margin: auto;
    }

如您所见，外部覆盖整个页面，内部与底部对齐。
但是当您单击 [使其变长] 按钮使内部变长时，外部不会显示滚动条。
如果我按预期将 .inner 中的 bottom:0 更改为 top:0，它会显示滚动条。

如何显示底部对齐内部的外部滚动条？

附加
好的，this fiddle 是我想要的最终形式。谢谢！

[HTML]

<div class="outer">
    <div class="inner">
        <div class="content">
            <p id="text">Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>

[CSS]

body {
    overflow-y:hidden;
}
.outer {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    z-index: 100;
}
.inner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    max-height:100%;
    overflow-y:auto;
}
.content {
    min-width:400px;
    max-width:800px;
    margin: auto;
}

【问题讨论】：

因为 .inner 是绝对定位的，它在 .outer 中没有大小。在 .inner 上执行 "max-height: 100%; overflow-y: scroll" 并从外部移除滚动条。另外，提供一个例子/小提琴/codepen
我明白了。最大高度是我错过的。感谢您的解决方案。
很高兴能帮上忙 :-)

标签： html css

【解决方案1】：

工作小提琴here。

正如 Doxick 提到的那样，我所做的是从你的外部移除溢出-y，为你的内部 div 设置一个高度，并将溢出-y:sroll 添加到它。

.outer {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    z-index: 100;
}
.inner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    overflow-y:scroll;
    max-height:100%;
    min-width:400px;
    max-width:800px;
    margin: auto;
}

【讨论】：

看起来更简单，谢谢你的小提琴。

【解决方案2】：

试试这样：Demo

HTML：

<div class="outer">
    <div class="inner">
        <div class="scroll">
            <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <button id="longButton" type="button">make it long!</button>
            <button id="shortButton" type="button">make it short!</button>
        </div>
    </div>
</div>

CSS：

body {
    overflow-y:hidden;
    height: 100%;
}
/*Opera Fix*/
 body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
.outer {
    width:100%;
    z-index: 9999;
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
}
.scroll {
    width:100%;
    max-height:260px;
    z-index: 9999;
    position:relative;
    overflow-y:auto;
}
.inner {
    width:100%;
    height:100%;
    min-width:400px;
    max-width:800px;
    margin: auto;
    overflow:hidden;
    position: relative;
    clear:both;
}
/*display*/
 .scroll {
    background-color: rgba(0, 255, 255, 0.2);
}
.inner {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
}

【讨论】：

我对@Doxick 的解决方案投了票，但当我需要该设计时，它也很有帮助。谢谢。