个人中心
gpt4 book ai didi

html - 如何保持页脚向下

转载 作者：行者123 更新时间：2023-11-28 03:00:16 25 4
gpt4 key购买 nike

我无法将页脚保留在桌面和移动设备的页面底部。有人可以检查我的代码并告诉我如何修复它吗？

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

我四处寻找修复程序，有一些，但 iv 尝试的修复程序只会破坏整个页面并将其全部推离对齐。我正在寻找尽可能少的代码来执行此操作，我不想为此使用大量代码。我想保持简单。我是网络开发的新手。这是我的第一个网站。

这是索引。

这是我的代码:

<!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>

<!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>

最佳答案

为了简化问题，假设您的 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;
}

请注意，您需要在容器中添加与页脚高度相同(此处为 100 像素)的底部填充，以使其正常工作。

这里的神奇之处在于您将包装器的最小高度设置为始终等于 100%，这会强制您的 div 适应视口(viewport)高度。

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

希望对您有所帮助!

关于html - 如何保持页脚向下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46249868/

25 4 0
文章推荐： html - 模态中的日期选择器
文章推荐： javascript - 如何在 HTML 的 pre 标签中包装文本？
文章推荐： javascript - html5 在多个页面上使用 Canvas 和脚本
文章推荐： html - 为什么我的背景图片没有覆盖整个页面？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com