neu*_*mic 4 css sticky-footer materialize flexbox
当我在这里为Materialise应用粘滞页脚显示的css属性时,我的主要元素的高度最高可达33000px.页脚显示正常,但高于空白(可能是长度约33000像素).元素使用标题正确排列,然后是主元素,然后是页脚元素.
HTML:
<body>
<header>
Header stuff
</header>
<main>
Main stuff
</main>
<footer>
Footer stuff
</footer>
</body>
Run Code Online (Sandbox Code Playgroud)
青菜:
body
display: flex
min-height: 100vh
flex-direction: column
main
flex: 1 1 auto
Run Code Online (Sandbox Code Playgroud)
neu*_*mic 18
我能够通过将父flex css应用于包装div而不是body元素来解决这个问题,如下所示:
HTML:
<body>
<div class="page-flexbox-wrapper">
<header>
Header stuff
</header>
<main>
Main stuff
</main>
<footer>
Footer stuff
</footer>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
青菜:
.page-flexbox-wrapper
display: flex
min-height: 100vh
flex-direction: column
main
flex: 1 1 auto
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
6908 次 |
最近记录: |