底部吸顶几种方式实现

最新推荐文章于 2024-10-11 17:39:47 发布

遥以相思寄东风

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量192

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_56144522/article/details/140716217

版权

第一种采用content 内容区margin 取负值

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      content
      <div class="push"></div>
    </div>

    <footer class="footer">footer</footer>
  </body>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    .wrapper {
    /*重要部分 给一个最小高度 然后对底部取负值 然后footer 高度与取值一样*/
     min-height: 100%;
      margin-bottom: -50px;
    }

    .footer,
    .push {
      height: 50px;
      background-color: aquamarine;

      /*第二种方法 底部footer向上距离*/
      /*
      .footer{
      margin-top:-50px;
      }
      */
    }
  </style>
</html>

第二种方法采用计算属性进行计算内容区域通过calc计算总高度为100vh 减去footer高度

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="content">content</div>


    <footer class="footer">footer</footer>
  </body>
  <style>
    .content {
      min-height: calc(100vh - 70px);
    }


    .footer {
      height: 50px;
      background-color: aquamarine;
    }
  </style>
</html>

第三种采用flex布局

<html lang="en">
  <header>
    <h1>Site name</h1>
  </header>
  <div class="main">
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
  </div>
  <footer>
    <p>© 2017 No rights reserved.</p>
    <p>Made with ♥ by an anonymous pastafarian.</p>
  </footer>
  <style>
    body {
      display: flex;
      flex-flow: column;
      min-height: 100vh;
      overflow: auto;
    }
    h1 {
      font-size: 60px;
      text-align: center;
    }
    p {
      font-size: 24px;
      text-align: center;
    }
    /*通过flex 均分main空间 footer 始终在底部
    */
    .main {
      flex: 1;
    }
  </style>
</html>