zoukankan      html  css  js  c++  java
  • div 底部固定方法(不用position定位)

    方法一:全局增加一个负值下边距等于底部高度

    <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .content {
      padding: 20px;
      min-height: 100%;
      margin: 0 auto -50px;
    }
    .footer,.push {
      height: 50px;
    }
    </style>
    <div class="content">
      <h1>Sticky Footer with Negative Margin 1</h1>
      <p><button id="add">Add Content</button></p>
      <div class="push"></div>
    </div>
    <footer class="footer">Footer </footer>

    方法二:底部元素增加负值上边距

    <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .content {
      min-height: 100%;
    }
    .content-inside {
      padding: 20px;
      padding-bottom: 50px;
    }
    .footer {
      height: 50px;
      margin-top: -50px;
    }
    body {
      font: 16px Sans-Serif;
    }
    h1 {
      margin: 0 0 20px 0;
    }
    p {
      margin: 20px 0 0 0;
    }
    footer {
      background: #42A5F5;
      color: white;
      line-height: 50px;
      padding: 0 20px;
    }
    </style>
    <div class="content">
      <div class="content-inside">
        <h1>Sticky Footer with Negative Margin 2</h1>
        <p><button id="add">Add Content</button></p>
      </div>
    </div>
    <footer class="footer"> Footer </footer>

    方法三:使用calc()计算内容的高度

    <style>
    .content {
      min-height: calc(100vh - 70px);
      padding: 40px 40px 0 40px;
    }
    .footer {
      height: 50px;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font: 16px Sans-Serif;
    }
    h1 {
      margin: 0 0 20px 0;
    }
    p {
      margin: 0 0 20px 0;
    }
    footer {
      background: #42A5F5;
      color: white;
      line-height: 50px;
      padding: 0 20px;
    }
    </style>
    <div class="content">
      <h1>Sticky Footer with calc()</h1>
      <p><button id="add">Add Content</button></p>
    </div>
    <footer class="footer"> Footer </footer>

    方法四:使用flexbox

    <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .content {
      flex: 1;
      padding: 20px;
    }
    .footer {
      padding: 20px;
    }
    </style>
    <div class="content">
      <h1>Sticky Footer with Flexbox</h1>
      <p><button id="add">Add Content</button></p>
    </div>
    
    <footer class="footer">Footer </footer>

    方法五:使用grid布局

    <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
    }
    .content {
      padding: 20px;
    }
    .footer {
      grid-row-start: 2;
      grid-row-end: 3;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font: 16px Sans-Serif;
    }
    h1 {
      margin: 0 0 20px 0;
    }
    p {
      margin: 0 0 20px 0;
    }
    .footer {
      background: #42A5F5;
      color: white;
      padding: 20px;
    }
    </style>
    <div class="content">
      <h1>Sticky Footer with Grid</h1>
      <p><button id="add">Add Content</button></p>
    </div>
    <footer class="footer">Footer</footer>
    

    本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hji2iaj0cbb

  • 相关阅读:
    QT VS配置UNICODE问题
    深入理解C++中的mutable关键字
    Qt creator error: LNK1123: 转换到 COFF 期间失败: 文件无效或损坏(vs2010的嵌入式清单文件)
    hdu 3401 Trade 单调队列优化dp
    QT父子与QT对象delete
    QT下的几种透明效果(三种方法:调色板,透明度属性,自绘)
    QT实现鼠标钩子(使用SetWindowsHookEx安装mouseProc函数)
    VirtualBox的网络设置(6种方式)
    8个成功界面的特性
    熬之滴水成石:Spring--精简的J2EE(7)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12896804.html
Copyright © 2011-2022 走看看