为什么我没有在这个 div 中滚动？答案

【问题标题】：Why am I not getting scrolling in this div?为什么我没有在这个 div 中滚动？
【发布时间】：2014-09-25 06:11:59
【问题描述】：

在How can I get a div that treats line breaks as significant to scroll if it exceeds a certain height? 中，我想我已经为我遇到的问题隔离了一个简单的测试用例，即DIVs 和max-height 和自动设置滚动。然而，虽然How can I get a div that treats line breaks as significant to scroll if it exceeds a certain height? 的答案导致行为不变：所讨论的div 内容不管它们的内容有多高，而且似乎不会滚动。所以让我给出我的源代码：

CSS：

<style type="text/css">
    div.user{
        height: 30%;
        max-height: 30%;
        overflow-y: scroll;
        white-space: pre-wrap;
    }
    div.user div.text{
        height: 30%;
        max-height: 30%;
        overflow-y: scroll;
    }
    input[type='text'] {
        width: 100%;
    }
    textarea {
        width: 100%;
        height: 150px;
    }
</style>

源 HTML：

<div class='user' ng-repeat='session in sessions'>
    <div class='text' ng-bind='monologues[session][0]'></div>
    <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div>
</div>

您通过 Chrome 的 Inspect Element 获得什么：

<div class="user ng-scope" ng-repeat="session in sessions">
    <div class="text ng-binding" ng-bind="monologues[session][0]">a
    b
    c
    d
    h
    i
    j
    k
    l
    m
    n
    o
    p
    q
    r
    s
    t
    </div>
    <div class="timestamp ng-binding" ng-bind="monologues[session][1] | to_locale">6/19/2014 1:14:30 PM</div>
</div>

我尝试了一些排列，但我看不出这与我的最小测试用例有何不同。

应该改变什么以使 div.user 或 div.text 的高度为 30%？

谢谢，

【问题讨论】：

我认为你必须给父母一个高度。看看这个question的答案。
codepen 或 jsfiddle 将有助于更快地解决这个问题。一个快速的建议是尝试overflow-y: auto。还要记住，'pre-wrap' 是荣誉空白，所以这可能会导致 x 轴溢出。
父元素有高度吗？您不需要声明相同值的高度和最大高度。你只需要height: 30%

标签： html css angularjs formatting scroll

【解决方案1】：

这是我的意思的演示。你应该在 el 或 parent 上声明一个高度，否则内容只会填满 div，这也很好 b/c 你正在使用pre-wrap

div.user{
    border: 1px solid tomato;
    height: 300px;
    overflow: auto;
    white-space: pre-wrap;
}
div.user div.text{
    height: 30%;
    border: 1px solid #bada55;
    overflow-y: scroll;
}
input[type='text'] {
    width: 100%;
}
textarea {
    width: 100%;
    height: 150px;
}

http://codepen.io/presstep/pen/pCDtx

TL;DR：在没有明确声明高度的情况下，浏览器认为除了使 div 足够大以容纳其内容之外，没有其他理由做任何事情。

【讨论】：