可滚动内容内的可滚动内容

时间：2016-12-29 00:54:59

标签： html css

我想知道是否可以将可滚动内容放在可滚动内容中。我有这样的事情：

＆＃13;
＆＃13; 
<div style="overflow-y: auto; padding: 10px">
    <div layout="column">
        <h3 style="margin: 5px">Header 1</h3>
        <h3 style="margin: 5px">Header 2</h3>
    </div>
    <div layout="column" layout-align="center center" style="height: 100%">
        <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto">
            <div layout="column" style="width: 100%">
                This content could be any height but should start scrolling when it
                gets larger than parent div
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

到目前为止，我只能滚动外部div。有没有办法让两者都可滚动（没有设置特定的像素高度）？

1 个答案:

答案 0 :(得分：2)

如果父容器的高度为100％ - 你将没有任何滚动条，如果它的子元素将是70％，如果它是父级 - 那就相同。

如果您将父容器设为固定高度，则会滚动它们：

<div style="overflow-y: auto; padding: 10px; border: 1px solid red; height: 500px;">
    <div layout="column">
        <h3 style="margin: 5px">Header 1</h3>
        <h3 style="margin: 5px">Header 2</h3>
    </div>
    <div layout="column" layout-align="center center" style="height: 100%">
        <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto;border: 1px solid blue;">
            <div layout="column" style="width: 100%">
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
            </div>
        </div>
    </div>
</div>

如果您不想使用特定像素，可以使用vh代替（viewport-height）

<div style="overflow-y: auto; padding: 10px; border: 1px solid red; height: 100vh;">
    <div layout="column">
        <h3 style="margin: 5px">Header 1</h3>
        <h3 style="margin: 5px">Header 2</h3>
    </div>
    <div layout="column" layout-align="center center" style="height: 100%">
        <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto;border: 1px solid blue;">
            <div layout="column" style="width: 100%">
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
                This content could be any height but should start scrolling when it
                gets larger than parent div
            </div>
        </div>
    </div>
</div>

相关问题
最新问题