如何在Firefox和IE中使这个100%高度+列溢出布局工作？

Question

我有一个三列布局,占用浏览器宽度和高度的100%(带填充).此布局包含两列,它们也占据100%的高度并且应该独立滚动.

这是一个jsfiddle:http://jsfiddle.net/KdZ9A/2/.以下是它在Chrome中的外观(可取 - 个别列滚动):

和Firefox和IE(不受欢迎 - 正在滚动):

这在Chrome中完美运行; 但是,在Firefox和IE(10)中,整个页面滚动而不是单个列滚动.我只希望列溢出并滚动 - 而不是正文.知道如何在Firefox和IE中使这项工作？

我还尝试了使用列内容的绝对定位的一种不同的方法:http://jsfiddle.net/KdZ9A/3/.

这是我正在使用的HTML:

<div id="container">
    <div id="inner">
        <div id="palette">palette</div>
        <div id="list">
            <div class="content"></div>
        </div>
        <div id="editor">
            <div class="content"></div>
        </div>
    </div>
</div>

我正在使用绝对定位来达到100%的高度,然后在其中显示表格和表格单元格,以实现100%的立柱高度:

* {
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
}

#container {
    background-color: #f1f1f1;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
}

#inner {
    display: table;
    height: 100%;
}

#inner > div {
    display: table-cell;
}

#palette {
    min-width: 180px;
    max-width: 180px;
    width: 180px !important;
    background-color: pink;
}

#list {
    width: 55%;
    min-width: 350px;
    background-color: cyan;
}

#editor {
    width: 45%;
    min-width: 400px;
    background-color: magenta;
}

.content {
    overflow: auto;
    height: 100%;
}

Answer 1

您必须了解，浏览器仅在了解内容的大小（即高度和宽度）大于为其指定的大小时才应用滚动。在您的情况下，您为 div 指定的高度是 100%。这有效地告诉浏览器不断增加 div 的大小，直到所有内容完全适合。因此，这会造成不需要滚动的情况，因为浏览器会“适合”此 div 中的整个内容。

因此，如果您希望 div（或其中包含的段落）可滚动，则必须指定高度，然后告诉浏览器为不适合指定大小的内容提供滚动。

我不确定您是否希望单个“段落”可滚动，或者整个 div（包含这些段落）可滚动。无论哪种情况，您都需要提供固定的高度才能使滚动有用。您的段落标签需要应用以下 CSS：

p {
    height: 200px;        /*Some fixed height*/
    overflow-y: scroll;
}

这是一个例子： http: //jsfiddle.net/y49C3/

如果您希望名为“内容”的 div 可滚动（而不是段落），那么您必须将上述 CSS 应用于该 div。

.content {
    overflow-y: scroll;
    height: 500px;
}

您可以在这里看到： http: //jsfiddle.net/qF7Mt/1/

我已经在 Firefox (29) 和 IE 10 中对此进行了测试，效果很好！

希望这可以帮助！！！