Question

我有两个div，＆＃39;外部＆＃39;和内心的＆＃39;像这样：
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;
    }

如您所见，外部覆盖整页，内部与底部对齐但是当你单击[make it long]按钮使内部长，外部不会显示滚动条。
如果我按照预期将 bottom：0 更改为 .inner 中的 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;
}

Answer 1

工作小提琴here。

正如Doxick所提到的，我所做的就是从你的outter中删除overflow-y，为你的内部div设置一个高度，并添加overflow-y：sroll to it。

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

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

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

2 个答案: