管理以在Firefox,Chrome,Edge,Opera中使用Flexbox布局。
想在IE11中完成这项工作,或者确定无法做到这一点。
我已阅读有关IE11问题的内容,并尝试在容器上设置100%的高度,但没有成功。 IE11内容垂直溢出除body之外的所有容器。
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.header,
.footer {
height: 2em;
flex: none;
background-color: orange;
}
.content-wrapper {
flex: 1 0 auto;
width: 100%;
background-color: white;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
width: 100%;
max-width: 60em;
margin: 0 auto;
display: flex;
flex-direction: row;
background-color: red;
}
.main {
flex: 1;
padding: 1em 1em 0;
min-width: 12em;
display: flex;
flex-direction: column;
background-color: blue;
}
.main-body {
flex: 1 0;
background-color: yellow;
}
.main-toc {
order: -1;
background-color: green;
}
.nav {
order: -1;
flex: 0 0 auto;
width: 12em;
}
pre {
position: relative;
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
max-width: 100%;
background-color: silver;
}
<header class="header">
header
</header>
<div class="content-wrapper">
<div class="content">
<main id="main" role="main" class="main">
<div id="main-body" class="main-body">
<h1>H1</h1>
<p><a href="#">link</a>
</p>
<p>On the other hand, we denounce with righteous indignation ...</p>
<pre><code class="language-php">
public function publicMethodOptionalParam($p1 = null)
{
return true;
}
</code></pre>
<p>On the other hand, we denounce with righteous indignation ...</p>
</div>
<div id="main-toc" class="main-toc">
table of contents
</div>
</main>
<nav id="nav" role="navigation" class="nav">
<ul>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active"><a href="/getting-started/introduction/">Introduction</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<footer class="footer">
footer
</footer>
Codepen使用上面的代码
答案 0 :(得分:-2)
在flex: 1 0 auto;
中将.content
添加到version: '3'
services:
cte_db:
image: mysql:5.7.24
restart: on-failure
container_name: cte_db
ports:
- "3306:3306"
volumes:
- /cte_data/mysql:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: somepassword
MYSQL_DATABASE: somedatabase
MYSQL_USER: someuser
MYSQL_PASSWORD: somepassword
cte_apache:
build: .docker/apache
container_name: cte_apache
ports:
- 8080:8080
- 80:80
volumes:
- .docker/config/vhosts:/etc/apache2/sites-enabled
- ./cte_app:/home/wwwroot/cte_app
- ./cte_fe:/home/wwwroot/cte_fe
depends_on:
- cte_fe
- cte_app
cte_app:
build: .docker/php
container_name: cte_app
volumes:
- ./cte_app:/home/wwwroot/cte_app
depends_on:
- cte_db
cte_fe:
build: .docker/php
container_name: cte_fe
volumes:
- ./cte_fe:/home/wwwroot/cte_fe
depends_on:
- cte_app
- cte_db
中。
请参见Codepen。
来自michaPau的评论。代表他这样做,因为他没有反应,所以可以解决此问题,并且对于希望寻找该解决方案的人来说,解决方案更易于访问/使用。