Question

我要在网页上使用的Flexbox布局具有以下基本HTML / CSS：

body, div, html, h1, h2, li, p, ul {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.headerContainer {
    background: darkblue;
    color: white;
    padding: 10px;
}
.sidebarAndContentContainer {
    display: flex;
    flex: 1;
}
.sidebar {
    background: gray;
    padding: 10px;
}
.nav {
    color: white;
    list-style: none;
}
.content {
    padding: 10px;
}

<div class="container">
    <div class="headerContainer">
        <h1>Site Title</h1>
    </div>
    <div class="sidebarAndContentContainer">
        <div class="sidebar">
            <ul class="nav">
                <li>Nav Link #1</li>
                <li>Nav Link #2</li>
                <li>Nav Link #3</li>
                <li>Nav Link #4</li>
                <li>Nav Link #5</li>
            </ul>
        </div>
        <div class="content">
            <h2>Page Title</h2>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
</div>

布局看起来像我在Chrome，Firefox和Edge中想要的布局，但是当我将其加载到IE11中时，侧栏div并没有像应该的那样拉伸页面的垂直长度。实际上，它只有20像素高（只是填充）。

为什么这会在IE11（我认为它支持flexbox）中发生，更重要的是，如何解决它？谢谢。

编辑：在找到了可行的解决方案并将其发布后，我认为该问题与问题顶部链接的问题并不重复，因为最终，其他问题没有相同的问题或无法回答我所问的问题。

Answer 1

尝试将其从flex:1;更改为flex: 1 0 0;

此链接将说明https://stackoverflow.com/a/22883146/6288545

Answer 2

问题仅在于min-height和height的语义。试试；

body, div, html, h1, h2, li, p, ul {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    /* min-height: 100%;  <---- Your Culprit */
    height: 100%;
}
.headerContainer {
    background: darkblue;
    color: white;
    padding: 10px;
}
.sidebarAndContentContainer {
    display: flex;
    flex: 1;
}
.sidebar {
    background: gray;
    padding: 10px;
}
.nav {
    color: white;
    list-style: none;
}
.content {
    padding: 10px;
}

<div class="container">
    <div class="headerContainer">
        <h1>Site Title</h1>
    </div>
    <div class="sidebarAndContentContainer">
        <div class="sidebar">
            <ul class="nav">
                <li>Nav Link #1</li>
                <li>Nav Link #2</li>
                <li>Nav Link #3</li>
                <li>Nav Link #4</li>
                <li>Nav Link #5</li>
            </ul>
        </div>
        <div class="content">
            <h2>Page Title</h2>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
</div>

Answer 3

IE11仅部分支持flexbox。

如果尚未访问此网站，请访问：SDL_GetKeyboardState

除非它具有超临界特性，否则我认为不值得因为支持Microsoft早已采用的2代旧浏览器而失去太多睡眠。

Answer 4

首先，非常感谢Chris W.和Max Hughes的回答和建议。没有它，我将永远找不到答案。话虽如此，我最终不得不同时使用两个答案才能得到我想要的东西。

在提供答案之前，这是我一直在寻找的东西：

侧栏始终将页眉未占据的内容拉伸到屏幕垂直空间的100％。
无论页面内容是否导致页面滚动，侧边栏都将延伸到视图窗口的底部。
在Chrome，Firefox，Edge，IE10 + IE11中可以使用的工具。

话虽如此，我对原始答案中的代码的以下两个更改是满足以上所有条件的内容：

.container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Changed from min-height. */
}
...
.sidebarAndContentContainer {
    display: flex;
    flex: 1 0 auto; /* Changed from flex: 1. */
}

为什么此Flexbox布局在IE11中不起作用？

4 个答案: