使html的子部分可滚动

Question

我想在这里绘制一个3列布局：

第二列和第三列在iframe中，因为此外部导航用于其他页面，我想避免重复代码。所以第一个网站包含左栏+一个iframe 第二页（iframe的源）包含其他2列。这两次都是浮动完成的 我的问题是，可能会发生有太多属性，因此它不适合屏幕，因此我只想使该部分可滚动。目前，右列是div元素并包含一个表。第一行包含＆＃34;大纲＆＃34;文本和第二个具有属性值的div。我尝试通过设置溢出来获取可滚动：滚动包装div（表格） 这不起作用，表（一个是第三列）实际上高于父div元素（我已将表的高度设置为100％）

任何人都可以举例说明如何构建这样的案例吗？或者甚至告诉我我的错误在哪里？

由于

Answer 1

要给出100％（其父级）的高度，必须指定父级的高度。右列的父亲是身体，因此身体的高度为100％。那么这应该很容易解决：

＆＃13;

＆＃13;

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#elementCol {
    float: left;
    background: orange;
}
#attribCol {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: salmon;
}

＆＃13;

<div id="elementCol">
    <p>Element 1</p>
    <p>Element 2</p>
</div>
<div id="attribCol">
    <p>Outline</p>
    <table>
        <tr><td>Attribute 1</td></tr>
        <tr><td>Attribute 2</td></tr>
        <tr><td>Attribute 3</td></tr>
        <tr><td>Attribute 4</td></tr>
        <tr><td>Attribute 5</td></tr>
        <tr><td>Attribute 6</td></tr>
        <tr><td>Attribute 7</td></tr>
        <tr><td>Attribute 8</td></tr>
        <tr><td>Attribute 9</td></tr>
        <tr><td>Attribute 10</td></tr>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;