堆栈内存溢出
  简体   繁体   English

如何让网站页脚停留在页面底部？

[英]How to make website footer stay at the bottom of the page?

 原文  2022-01-21 16:03:51  3   2    html/ css/ footer/ sticky-footer

问题描述

I am relatively new to HTML and CSS, and I know this question has been asked many times.我对 HTML 和 CSS 比较陌生，我知道这个问题已经被问过很多次了。 But I haven't found a solution that works.但我还没有找到可行的解决方案。 My project partner sent me this HTML footer code which I have to put at the bottom of our website.我的项目合作伙伴给我发了这个 HTML 页脚代码，我必须把它放在我们网站的底部。 The lone HTML file itself works when I open it on a browser.当我在浏览器上打开它时，单独的 HTML 文件本身可以工作。

<!DOCTYPE html>
<html>
<style>
.footer-dark {
  padding:50px 0;
  color:#f0f9ff;
  background-color:#0a384b;
}
.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}
.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}
.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}
.footer-dark ul a:hover {
  opacity:0.8;
}
@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}
.footer-dark .item.text {
  margin-bottom:36px;
}
@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}
.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}
.footer-dark .item.social {
  text-align:center;
}
@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}
.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}
.footer-dark .item.social > a:hover {
  opacity:0.9;
}
.footer-dark .copyright {
  text-align:center;
  padding-top:24px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:0;
}
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <div class="footer-dark">
      <footer>
          <div class="container">
              <div class="row">
                  <div class="col-sm-6 col-md-3 item">
                      <h3>Services</h3>
                      <ul>
                          <li><a href="#">Consultation</a></li>
                          <li><a href="#">Confinement</a></li>
                          <li><a href="#">Other Services</a></li>
                      </ul>
                  </div>
                  <div class="col-sm-6 col-md-3 item">
                      <h3>About</h3>
                      <ul>
                          <li><a href="#">Doctors</a></li>
                          <li><a href="#">Partner Hospitals</a></li>
                          <li><a href="#">Offers</a></li>
                      </ul>
                  </div>
                  <div class="col-md-6 item text">
                      <h3>St. San Vitores Hospital</h3>
                      <p>Your health is our priority. </p>
                  </div>
                  <div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
              </div>
              <p class="copyright">St. San Vitores Hospital © 1980 </p>
          </div>
      </footer>
  </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

However, I have to incorporate his code into our main file.但是，我必须将他的代码合并到我们的主文件中。 I put the contents inside < div class="footer-dark" > in our index.html file, and the content inside the < style > tag in our index.css file.我把 <div class="footer-dark"> 里面的内容放到我们的 index.html 文件里，把 <style> 标签里面的内容放到我们的 index.css 文件里。

CSS CSS

@media screen and (max-width: 1240px) {
    .container a {
      float: none;
      display: block;
      text-align: left;
    }
    .header-right {
      float: none;
    }
  }
html {
  height: 100%;
  box-sizing: border-box;
}
body {
  height: 100%;
  min-height: 100%;
  min-height: 100vh;

  display:flex; 
  flex-direction:column; 
}

/* other content of the website*/

footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}
.footer-dark {
  padding:50px 0;
  color:#f0f9ff;
  background-color:#0a384b;
}
.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}
.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}
.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}
.footer-dark ul a:hover {
  opacity:0.8;
}
@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}
.footer-dark .item.text {
  margin-bottom:36px;
}
@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}
.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}
.footer-dark .item.social {
  text-align:center;
}
@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}
.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}
.footer-dark .item.social > a:hover {
  opacity:0.9;
}
.footer-dark .copyright {
  text-align:center;
  padding-top:24px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:0;
}

html {
  scroll-behavior: smooth;
}

The footer contents overlap some contents in the middle of the webpage.页脚内容与网页中间的一些内容重叠。 However, when I minimize the browser, the footer actually goes to the bottom.但是，当我最小化浏览器时，页脚实际上会到底部。 How do I make it stay at the bottom of the webpage regardless of the size of the browser?无论浏览器的大小如何，如何让它保持在网页的底部？

2 个解决方案

解决方案1
 0  2022-01-21 16:15:25

From html and also from the index.css it works for me by adding these 2 lines to.footer-dark:从 html 和 index.css 开始，通过将这两行添加到.footer-dark 对我有用：

position: fixed;
bottom: 0;  
width: 100%;

And remember记住

<link rel="stylesheet" href="index.css">

in the head section of your html.在 html 的头部。

解决方案2
 0  2022-01-21 16:52:34

Try adding the fixed position and the bottom style to your footer-dark class尝试将固定的 position 和底部样式添加到您的页脚深色 class 

 .footer-dark { padding:50px 0; color:#f0f9ff; background-color:#0a384b; position: fixed; left: 0; bottom: 0; width: 100%; }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使页脚停留在页面引导的底部4 - How to make footer stay on the bottom of the page bootstrap 4 CSS - 如何使页脚停留在页面底部？ - CSS - How to make footer stay at the bottom of the page? 使页脚停留在页面底部（不固定到底部） - Make footer stay at bottom of page (not fixed to bottom) 如何使页脚停留在页面底部？ （不使用位置：固定） - How to make footer stay at the bottom of the page? (not using position:fixed) 即使窗口很小，如何使此页脚也停留在页面底部 - how to make this footer stay at bottom of page even window is small 如何使用 flex-box 使页脚停留在页面底部 - How to make footer stay at bottom of the page with flex-box 如何使页脚停留在页面底部？ - How do I make my footer stay at the bottom of my page? 使用CSS使页面的页脚停留在底部 - Make footer of page stay at bottom with CSS 页脚不会停留在页面底部 - Footer will not stay at the bottom of the page 页脚不会停留在页面底部 - Footer will not stay at bottom of page
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM