将页脚的底部高度保持可变[重复]

：解决此布局问题的现代方法是使用

flexbox

这是使用

div

display: table-row

html, body {  height: 100%;  margin: 0;}.wrapper {  display: table;  height: 100%;  width: 100%;  background: yellow;}.content {  display: table-row;    height: 100%;    background: turquoise;}.footer {  display: table-row;  background: lightgray;}<div >  <div >    <h2>Content</h2>  </div>  <div >    <h3>Sticky footer</h3>    <p>Footer of variable height</p>  </div></div>

需要注意的是CSS是设计用于布局 文档的 ，而不是Web应用程序屏幕的。CSS
display：table属性虽然非常有效，并且在所有主流浏览器中都受支持。这与使用
结构 表进行布局不同。