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

如果您想要一个STICKY底部页脚（内容“向下”推动页脚），请参见：https://stackoverflow.com/a/45919356/171456

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>

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

2 个答案: