这段代码在Firefox,Chrome和Edge中工作正常,但由于flex模型,IE11中的操作不正常.我该如何解决?
这是Firefox的外观
这是IE11的外观
body * { Box-sizing: border-Box; } html { height: 100%; } body { min-height: 100%; display: flex; flex-flow: column; margin: 0; } main { flex: 1; display: flex; } header,footer { background: #7092BF; border: solid; width: 100%; } section { border: solid; background: #9AD9EA; flex: 1 } aside { border: solid; width: 150px; background: #3E48CC }
<header> <p>header </header> <main> <aside> <p>aside <p>aside </aside> <section> <p>content <p>content <p>content <p>content </section> </main> <footer> <p>footer <p>footer </footer>
解决方法
这可能与IE11上的最小高度
bug相关,请尝试:
改变身体{min-height:100%; }到body {height:100%; }
section { overflow: auto; }
body * { Box-sizing: border-Box; } html { height: 100%; } body { /* min-height: 100%; */ height: 100%; /*added*/ display: flex; flex-flow: column; margin: 0; } main { flex: 1; display: flex; } header,footer { background: #7092BF; border: solid; width: 100%; } section { overflow: auto; /*added*/ border: solid; background: #9AD9EA; flex: 1 } aside { border: solid; width: 150px; background: #3E48CC }
<header> <p>header </header> <main> <aside> <p>aside <p>aside </aside> <section> <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content <p>content </section> </main> <footer> <p>footer <p>footer </footer>
原文地址:https://www.jb51.cc/html/224103.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。