Open chenxiaochun opened 7 years ago
假设html结构定义为以下形式:
<div class="wrapper">这是wapper</div> <footer>这里是footer</footer>
body{ margin: 0; display: flex; flex-flow: column; min-height: 100vh; } .wrapper{ background: #ccc; flex: 1; text-align: center; } footer{ height: 80px; background: #333; color: #fff; text-align: center; }
body{ margin: 0; } .main{ background: #ccc; text-align: center; min-height: calc(100vh - 80px); } footer{ height: 80px; background: #333; color: #fff; text-align: center; }
这个方法的实现关键点是:
min-height: calc(100vh - 80px)
但是,你不能把它写成:
min-height: calc(100vh-80px)
看出来没有?它们之间的区别就是减号两侧必须要带有一个空格,否则不会起作用。
html, body{ height: 100%; margin: 0; } .main{ background: #ccc; text-align: center; min-height: 100%; margin-bottom: -80px; paddinb-bottom: 80px; box-sizing: border-box; } footer{ height: 80px; background: #333; color: #fff; text-align: center; }
假设html结构定义为以下形式:
第一种方法
第二种方法
这个方法的实现关键点是:
但是,你不能把它写成:
看出来没有?它们之间的区别就是减号两侧必须要带有一个空格,否则不会起作用。
第三种方法