html：

  <header>header</header>
  <main>main</main>
  <footer>footer</footer>

css:

 header{
    height: 100px;
    background-color: red;
  }
  main{
    background-color: yellow;
    height: 100vh;
  }
 footer{
    background-color: gray;
    height: 10vh;
  }

方法1.

使用 position: sticky;

 footer{  
    position: sticky;
    top: 100vh;
  }

footer使用sticky属性，并且top: 100vh;

方法2.

使用flex

body{
    display: flex;
    flex-direction: column;
        min-height: 100vh;
  }
 main{
    background-color: yellow;
    flex-grow: 1;
  }

body高度为 min-height: 100vh;使用flex，主轴为纵轴。main设置flex-grow: 1;来撑满body 使footer在最底下。

版权属于：小小窝/禾下月

本文链接：https://hxyxyz.top/index.php/Web/275.html

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！