Question

在How can I get a div that treats line breaks as significant to scroll if it exceeds a certain height?中，我认为我已经针对我遇到的问题分离了一个简单的测试用例，即带有DIV的{{1}}和自动设置的滚动。但是，虽然How can I get a div that treats line breaks as significant to scroll if it exceeds a certain height?的答案会导致行为不变：但有问题的max-height内容的内容却很高，而且似乎不会滚动。所以让我给出我的源代码：

CSS：

div

来源HTML：

<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>

Chrome的Inspect Element获得了什么：

<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>

我尝试了一些排列，但我不知道这与我的最小测试用例有什么不同。

应该更改什么以便div.user或div.text高30％？

谢谢，

Answer 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足够大以容纳其内容之外，浏览器没有理由做任何事情。

为什么我不在这个div中滚动？

1 个答案: