Question

我无法将页脚保留在桌面和移动设备的页面底部。有谁可以请仔细检查我的代码并告诉我如何解决它？

问题是它一直回到页面的中心，我无法将其移动并让它保留在大多数浏览器和设备中。

我已经四处寻找修复工具，但有一些但是试图破坏整个页面并将其全部排除在外。我正在寻找能够做到这一点的最少代码我不想要一大堆代码。我想保持简单。我是网络开发的新手。这是我的第一个网站。

这是索引。

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
  <title>THG Graphics</title>
  <script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  body,
  h1 {
    font-family: "Raleway", Arial, sans-serif
  }
  
  h1 {
    letter-spacing: 6px
  }
  
  .w3-row-padding img {
    margin-bottom: 12px
  }
  
  .dropdownmobile {
    height: 100%;
    width: 100%;
  }
  
  .border {
    width: 24.%;
    border: 1px solid #c3c3c3;
    display: inline-block
  }
  
  .dropbtn {
    background-color: #FFFFFF;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: thin;
    cursor: pointer;
  }
  
  .dropbtn:hover,
  .dropbtn:focus {
    background-color: #ffffff;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {
    background-color: #989898
  }
</style>

<body>

  <!-- !PAGE CONTENT! -->
  <div class="w3-content" style="max-width:1500px">

    <!-- Header -->
    <header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
      <h1>THG Graphics</h1>
      <h1 class="w3-xlarge">Graphic Designer</h1>
      <div class="w3-padding-32">
        <div class="border">
          <a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
          <a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
          <a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
          <div class="dropdown">
            <button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
            <div class="dropdown-content" id="myDropdown">
              <a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
              <a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
              <a href="#" title="Privacy policy" href="Privacypolicy.html" alt="Privacy Policy" class=" w3-button">Privacy Policy</a>
              <a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
            </div>
          </div>
        </div>
        <h2>Welcome to THG Graphics!</h2>
        <h5>We make custom Logos, Animated Logos &amp; Animations to suit your needs.</h5>
        <h5>Please check out our portfolio to view some of our work.</h5>
      </div>
    </header>
  </div>
  <footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
    <p class="fl_left">Copyright &copy; 2017 - All Rights Reserved - THG-Graphics.com</p>
    <div>
      <a href="TOS.html" class="w3-hover-text-blue">Terms of use</a>
      <a href="Privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a>
      <a href="FAQ.html" class="w3-hover-text-blue">FAQ</a>
    </div>
    <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p>
  </footer>
</body>

</html>

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
  <title>THG Graphics</title>
  <script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  body,
  h1 {
    font-family: "Raleway", Arial, sans-serif
  }
  
  h1 {
    letter-spacing: 6px
  }
  
  .w3-row-padding img {
    margin-bottom: 12px
  }
  
  .dropdownmobile {
    height: 100%;
    width: 100%;
  }
  
  .border {
    width: 24.%;
    border: 1px solid #c3c3c3;
    display: inline-block
  }
  
  .dropbtn {
    background-color: #FFFFFF;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: thin;
    cursor: pointer;
  }
  
  .dropbtn:hover,
  .dropbtn:focus {
    background-color: #ffffff;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {
    background-color: #989898
  }
</style>

<body>

  <!-- !PAGE CONTENT! -->
  <div class="w3-content" style="max-width:1500px">

    <!-- Header -->
    <header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
      <h1>THG Graphics</h1>
      <h1 class="w3-xlarge">Graphic Designer</h1>
      <div class="w3-padding-32">
        <div class="border">
          <a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
          <a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
          <a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
          <div class="dropdown">
            <button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
            <div class="dropdown-content" id="myDropdown">
              <a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
              <a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
              <a href="#" title="Privacy policy" href="Privacypolicy.html" alt="Privacy Policy" class=" w3-button">Privacy Policy</a>
              <a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
            </div>
          </div>
        </div>
        <h2>Welcome to THG Graphics!</h2>
        <h5>We make custom Logos, Animated Logos &amp; Animations to suit your needs.</h5>
        <h5>Please check out our portfolio to view some of our work.</h5>
      </div>
    </header>
  </div>
  <footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
    <p class="fl_left">Copyright &copy; 2017 - All Rights Reserved - THG-Graphics.com</p>
    <div>
      <a href="TOS.html" class="w3-hover-text-blue">Terms of use</a>
      <a href="Privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a>
      <a href="FAQ.html" class="w3-hover-text-blue">FAQ</a>
    </div>
    <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p>
  </footer>
</body>

</html>

＆＃13;

Answer 1

为了简化问题，请说您的HTML代码如下所示：

<div id="wrapper">
   <div class="header">HEADER</div>
   <div class="container">CONTENT</div>
   <div class="footer">FOOTER</div>
</div>

现在CSS代码的样子如下：

html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
}

#wrapper {
   min-height: 100%;
   width: 100%;
   position: relative;
}

.header {
   background: blue;
}

.container {
   background: red;
   padding-bottom: 100px; 
}

.footer {
   bottom: 0;
   width: 100%;
   height: 100px;
   position: absolute;
   background: yellow;
}

请注意，您需要在容器中添加一个与页脚高度完全相同的底部填充（此处为100px）才能使其正常工作。

这里发生了魔法，因为你将包装器的最小高度设置为总是等于100％，这会强制你的div适合视口高度。

无论如何，您的页脚都会位于页面底部。

希望这有帮助！

Answer 2

试试这个

.footer {position: absolute; bottom: 0; width: 100%;}

如何保持页脚

2 个答案: