Question

我在一个容器div中有一个包含2个div的页面。我想使用左侧div作为菜单，包含各种链接或文本，并自行向上和向下滚动（垂直）。

第二个div显示了一些内容。通常是一个数据表，但也可能是文本。此div必须能够根据内容水平和垂直滚动。

我有一些javascript填充两者的内容，但为了简单起见，我只会展示我的css and html：

-------------------
|    |            |
| 1  |     2      |
|    |            |
|    |            |
-------------------

我遇到的问题是IE（我正在运行IE9），第二个div掉落视图，然后进入第二行，而不是在容器div中对齐。这个布局和CSS在chrome和firefox中运行良好。

关于如何在IE9中实现这一点的任何想法？

Answer 1

IE9不支持flexbox，因此IE9正在按照自己有限的知识做它应该做的事情：它将#browser-view视为没有宽度集的块级元素，所以它把它放到了第二行。

您需要在#browser-view上指定固定宽度，就像使用#browser-list一样，并且还需要从正常的block默认值影响其显示（您可以浮动这些divs，让他们display: table-cell等等。）。

Answer 2

嗯，经过一些研究和一些测试后，我决定放弃我的CSS中的flexbox，以便我可以支持IE9。

这是一个更新的cross-browser testbed，它似乎做了我想要的，并且到目前为止适用于所有浏览器。

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

.Container:before
{
    content: '';
    height: 100%;
    float: left;
    position: relative;
    z-index: 1;
}
.Container:after
{
    content: '';
    clear: both;
    display: block;
}

.Container
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.Container > div
{
    height: 100%;
}

.browser-view
{
    background-color: purple;
    overflow: auto;
}

.browser-list
{
    background-color: orange;
    float: left;
    overflow: auto;
    width: 250px;
}

双div的CSS彼此独立滚动

2 个答案: