Wil*_* A. 3 html css internet-explorer google-chrome flexbox
我测试了flexbox的一些功能.所以,我试图用弯曲的方式将网页的底部放在底部.
这是测试和代码(用IE测试它看问题):http: //codepen.io/spiderwpc/pen/zxZMjv
html:
<body>
<header>
<h1>Header</h1>
</header>
<main>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</main>
</body>
<footer>
<h1>Footer</h1>
</footer>
Css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
header, footer {
background: #ccc;
h1 {
padding: 10px;
margin: 0;
}
}
并且与Chrome和Mozilla完美配合,但在IE 11中,页脚保持恰到好处的内容.这让我感到沮丧.
你能帮我解决这个问题吗？
| 归档时间： |
|
| 查看次数： |
7455 次 |
| 最近记录： |