无论内容尺寸如何，如何使页脚始终可见并始终位于底部

Question

我需要让页脚在我的页面中始终可见，无论页面内容有多长。以下代码可能有一些不一致，但它使页脚始终可见，但如果浏览器尺寸较小，则内容不会完全显示...我该如何解决？

这是我所做的：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./main.css">
  <script type="text/javascript" src="./jquery-3.2.1.js"></script>
  <script type="text/javascript" src="./main.js"></script>

  <style>
    html,
    body {
      height: 100%;
    }

    body {
      min-height: 100%; 
      position: relative; 
      padding-bottom: 72px;
    }

    #page-content {
      flex: 1 0 auto;
    }

    #footer {
      position: fixed; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      height: 72px;
    }

    body {
      background: #005ec2;
      background: linear-gradient(to right, #004aac, #4db7fd);
    }

  </style>
</head>

<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Prueba de Footer siempre visible</h1>
          <p class="lead text-white-50">
            Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies,
            in sapien placerat consequat luctus et integer. Augue metus et
            litora tristique curabitur, sodales nisl aliquam elementum commodo,
            aptent bibendum odio vivamus. Vulputate torquent ornare dis non
            sociosqu parturient platea aliquet arcu, leo convallis enim porttitor
            tempor magna molestie nulla augue vestibulum, mus ad commodo nisi ante
            nisl fusce ac. Nunc rutrum fringilla placerat augue bibendum platea
            condimentum sed, risus nascetur dapibus integer etiam cursus.
            Feugiat velit leo viverra ridiculus varius et hac class convallis
            venenatis auctor netus, eu risus aptent morbi mollis urna ante
            tristique tincidunt vehicula. Lacus morbi potenti praesent nisi
            rutrum taciti convallis, mus urna neque pharetra at aliquam, dui
            semper non torquent purus proin. Penatibus curabitur velit placerat
            pellentesque magnis magna conubia sed eros, convallis malesuada
            vestibulum ante proin ut cum quisque feugiat venenatis, augue
            dignissim iaculis sem imperdiet metus per a. Nec tincidunt
            lobortis habitant hac nostra per risus nisl morbi, taciti pellentesque
            consequat donec egestas odio sem duis, iaculis natoque
            fames suscipit at orci faucibus lacus.
          </p>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; 2019</small>
    </div>
  </footer>
</body>

Answer 1

如果你想要一个固定的底部页脚，底部填充（抵消页脚高度）应该在 #page-content 而不是正文...

body {
  min-height: 100%; 
  position: relative; 
}

#page-content {
  flex: 1 0 auto;
  padding-bottom: 72px;
}

https://www.codeply.com/go/9bT3w9BkgK

如果您想要粘性底部页脚（内容 "pushes" 页脚向下），请参阅：

Answer 2

如果我没理解你的问题，你想防止页脚与其余内容重叠，对吗？

我采用的方法是使 body 从不滚动。将除页脚之外的所有页面内容放入 div 并给 div 一个滚动条。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./main.css">
  <script type="text/javascript" src="./jquery-3.2.1.js"></script>
  <script type="text/javascript" src="./main.js"></script>

  <style>
    html {
      height: 100%;
    }

    body {
        margin-top: 0; 
        margin-bottom: 0;
      height: 100%; 
    }

    #page-content {
      flex: 1 0 auto;
      height: calc(100% - 72px);
      overflow-y: auto;
    }

    #footer {
      height: 72px;
    }

    body {
      background: #005ec2;
      background: linear-gradient(to right, #004aac, #4db7fd);
    }

  </style>
</head>

<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Prueba de Footer siempre visible</h1>
          <p class="lead text-white-50">
            Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies,
            in sapien placerat consequat luctus et integer. Augue metus et
            litora tristique curabitur, sodales nisl aliquam elementum commodo,
            aptent bibendum odio vivamus. Vulputate torquent ornare dis non
            sociosqu parturient platea aliquet arcu, leo convallis enim porttitor
            tempor magna molestie nulla augue vestibulum, mus ad commodo nisi ante
            nisl fusce ac. Nunc rutrum fringilla placerat augue bibendum platea
            condimentum sed, risus nascetur dapibus integer etiam cursus.
            Feugiat velit leo viverra ridiculus varius et hac class convallis
            venenatis auctor netus, eu risus aptent morbi mollis urna ante
            tristique tincidunt vehicula. Lacus morbi potenti praesent nisi
            rutrum taciti convallis, mus urna neque pharetra at aliquam, dui
            semper non torquent purus proin. Penatibus curabitur velit placerat
            pellentesque magnis magna conubia sed eros, convallis malesuada
            vestibulum ante proin ut cum quisque feugiat venenatis, augue
            dignissim iaculis sem imperdiet metus per a. Nec tincidunt
            lobortis habitant hac nostra per risus nisl morbi, taciti pellentesque
            consequat donec egestas odio sem duis, iaculis natoque
            fames suscipit at orci faucibus lacus.
          </p>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; 2019</small>
    </div>
  </footer>
</body>

无论内容尺寸如何，如何使页脚始终可见并始终位于底部

how to keep footer always visible and always at bottom no matter the contents dimensions

css

footer

bootstrap-4