Question

所以我一直在寻找这个问题的不同解决方案，我现在不确定这是否是我写出HTML的方式。我使用PHP将导航文件和页脚文件包含在index.php页面（主页）上的所有其他文件中，粘性页脚工作并停留在页面底部而不管内容如何，但每隔一页，页脚位于底部，但是当添加内容时，它会保留在同一个位置，只覆盖内容而不是被推下来。

标题HTML

<?php echo '

   <html>

    <head>

        <script src="/*/*/jquery-3.3.1.min.js"></script>

        <script src="/*/*/jquery-ui.min.js"></script>

        <link href="/*/*/bootstrap.min.css" rel="stylesheet">

        <link href="/*/*/jquery-ui.min.css" rel="stylesheet">

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

        <link href="css/media.css" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">

        <title> * </title>

    </head>

    <body>

    <div id="wholeNav">

        <div class="navBar">

            <a href="#video" class="navLinks" id="videoLink">Videos</a>

        </div>

        <div class="navBar">

            <h2 class="headerMain"><a id="pageTitle" href="index.php">*</a></h2>

        </div>

        <div class="navBar">

            <a href="#photo" class="navLinks" id="blogLink">Photos</a>

        </div>

        <div id="leftNav" class="socialNav">

            <a href="#" class="socialMediaLink" id="insta">Instagram <span class="displayNoneMobile">nameHere</span></a>

        </div>

        <div id="middleNav" class="socialNav">

            <a href="#" class="socialMediaLink" id="youTube">YouTube <span class="displayNoneMobile">nameHere</span></a>

        </div>

        <div id="rightNav" class="socialNav">

            <a href="#" class="socialMediaLink" id="twitter">Twitter <span class="displayNoneMobile">nameHere</span></a>

        </div>

    </div>



    </body>

</html>
';?>

页脚HTML

<?php include 'headnav.php' ;?>

     <?php echo '

      <div id="footer">

    <div class="footerInfo topTwo">

        <a href="about.php" class="footerLinks">About</a>

    </div>

    <div class="footerInfo topTwo">

        <a href="legal.php" class="footerLinks">Legal</a>

    </div>

    <div class="footerInfo bottomFour">

        <a href="contact.php" class="footerLinks">Contact</a>

    </div>

    <div class="footerInfo bottomFour">

        <a href="#" class="footerLinks">Instagram</a>

    </div>

    <div class="footerInfo bottomFour">

        <a href="#" class="footerLinks">YouTube</a>

    </div>

    <div class="footerInfo bottomFour">

        <a href="#" class="footerLinks">Twitter</a>

    </div>

    <div id="copyrightInfo">

    <p>&copy; All Content Owned By * - Website Designed By *</p>

    </div>

</div>

 ';?>

其他网页HTML

<?php include 'headnav.php' ;?>

<div id="container">

<div class="headerDiv">

    <h3 class="headerMainTwo">Terms &amp; Conditions</h3>

</div>

<div class="infoBox">

    <p class="legalTerms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque. Donec ultrices tincidunt arcu non. Quis ipsum suspendisse ultrices gravida dictum fusce. Luctus venenatis lectus magna fringilla urna porttitor rhoncus.
    </p>

</div>

<?php include 'footer.php' ;?>  

</div>

页脚CSS

html{
  position: relative;
  min-height: 100% !important;
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Amaranth', sans-serif !important;
  overflow-x: hidden;
}

#footer{
  height: 200px;
  background-color: #d8445e;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

其他页面CSS

.headerDiv{
  margin-top: 15vh;
  width: 100%;
  background-color: #d8445e;
  height: 10vh;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  border-top: 2px solid #FFF;
}

.infoBox{
  margin-left: 15%;
  width: 67.7vw;
  height: 50vh;
  position: absolute;
  margin-top: 28vh;
  font-size: 16px;
}

感谢您抽出时间阅读本文，我知道这可能是一个重复的帖子，但是我看了很多关于这个问题的帖子，这些修补程序似乎都没有帮助我的网站，所以最好自问一下

粘性页脚在索引页面上工作，但保留在涵盖内容的所有其他页面的中心

0 个答案: