1
フレックスボックスを使用してページの間隔を制御するラッパーを使用した簡単な設定を作成しました。それは固定位置、フッタ、およびその間にいくつかのスペースを持つ2つのヘッダーを持ち、ページの実際の内容量にかかわらず、画面の残りの部分を常に垂直方向に塗りつぶします。flexboxのテキストがInternet Explorer 11のdivから溢れる
#content_wrapperと#header_wrapperの間に、コンテンツとブラウザの幅に応じてサイズを変更するdivを追加しました。この目的のために#sub_header_wrapper divを追加しました。
これはすべてFirefoxでは正常に動作しますが、Internet Explorerでは#sub_header_wrapper divのテキストが溢れて#content_wrapperのテキストが重複し始めます。なぜこれが起こっているのですか？これをどのように修正できますか？
jsfiddle：https://jsfiddle.net/mevn8bvL/21/
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
}
/* needed to reset CSS so you dont get extra unneeded whitespace */
html,
body {
margin: 0;
/* required to avoid scroll bars due to min-height 100vh */
}
#outer_wrapper {
margin: 0;
height: 0;
/* required by IE to make flex-grow work */
min-height: 100vh;
background-color: pink;
display: flex;
flex-direction: column;
}
/* flex-grow is 99 to offset the variable nature of the sub header containers. */
#content_wrapper {
background-color: green;
flex-grow: 99;
/* this is what makes the div expand even when there's no content. */
}
#article_list {
background-color: red;
}
#header_wrapper {
position: fixed;
width: 100%;
z-index: 199;
box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.2);
}
#header_top_wrapper,
#header_bottom_wrapper {
height: 70px;
min-height: 70px;
/* min-height required to enforce the height */
}
#sub_header_wrapper {
background-color: rgb(150, 150, 255);
margin-top: 140px;
flex: 1 1 auto;
}
#header_top_wrapper {
background-color: yellow;
}
#header_bottom_wrapper {
background-color: orange;
}
#footer_wrapper {
height: 100px;
min-height: 100px;
background-color: blue;
}<div id="outer_wrapper">
<div id="header_wrapper">
<div id="header_top_wrapper">
header top
</div>
<div id="header_bottom_wrapper">
header bottom
</div>
</div>
<div id="sub_header_wrapper">
sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text.
sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text.
sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text.
</div>
<div id="content_wrapper">
<div id="article_list">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
<div id="footer_wrapper">
footer
</div>
</div>
Internet Explorerのバージョンを？ – juzraai
インターネットエクスプローラ11 – DisneylandSC