Question

我正在尝试使用页脚构建页面。它在1600x900看起来很好，但是一旦我缩小，页脚移动到死点并且不会让步。任何建议将不胜感激

#Container{
 width: 100%;
 height: 100%;
 position: absolute;
}

#Banner_Container {
 position:relative; 
 width: 100%;
 padding-bottom: 0.2%;


}

#Banner { 
 color: #FF7538;
 font-style: oblique;
 font-family: Courier New;
 line-height: 1;
 float: left;
}

#Index {
 width: 80%;
 background: rgba(250, 250, 250, 0.9);
 border: 10px solid #ED9121;
 border-style: outset;
 padding-top: 2%;
 float:left;
 padding-bottom: 2%;
 position: absolute;
 margin-top: 30%;
 min-width: 10%;
 max-width: 80%;
}

#nav {
  position: absolute;
  margin: 0;
  font-family: 'Roboto Condensed';
  width: 15%;
  float: right;
  border: 5px solid #ED9121;
  border-style: inset;
  margin-top: 35%;
  margin-left: 82%;
  min-width: 5%;
  max-width: 20%;

}

#footer{
 width: 100%;
 height: 50px;
 position: absolute;
 margin-top: 110%;
}

我被要求在PHP中执行此操作

的index.php

<?php
  echo "<div id='Container'>";
     include("banner.php");
     include("navbar.php");
     include("intro.php");
     include("footer.php");
  echo"</div>";
?>

所以我把它分开了

intro.php

<?php
    echo "<div  id='Index'>
            <div  id='Info'>
               <img align='left' src='images/stock1.jpg'/>
               <h2 align='left'>Welcome to East End Dental</h2>
               <p>Ipsum</p><br><br><br><br><br><br><br><br><br><br>
               <img align='right' src='images/stock2.jpg'/><br>
               <h2 align='left'>Quality Guarantee</h2>
               <p>Ipsum</p><br><br><br><br><br><br><br><br><br><br><br><br>

               <div id='summary1'>
                  <center><h2>Our Dental Services</h2>
                  <img src='images/stock3.jpg'/></center>
                  <p>Ipsum<br><br></p>
               </div>
               <div id='summary2'>
                  <center><h2>Meet the Staff</h2>
                  <a href='staff.php'><img src='images/stock4.jpg'/></a    </center>
                  <p>Ipsum.</p>
              </div>
              <div id='summary1'>
                  <center><h2>Contact Us Today</h2>
                  <img src='images/stock5.jpg'/></center>
                  <p>Ipsum</p><br><br>
            </div>

        </div>
    </div>";
?>

footer.php

<?php
  echo" <div  id='footer'>
      <center>
         <p>Company Name 2016<br/>
        Designed by <a href='mailto:email@gmail.com'>Name</a></p>
                     <a href='index.php'>Home</a> | <a href='services.php'>Services</a>  | <a href='cerec.php'>CEREC®</a> | <a href='staff.php'>Staff</a> | <a href='contact.php'>Contact</a>
                    </center>
                </div>";
?>

Answer 1

问题是您将页脚margin-top设置为110％会导致页脚以不同的屏幕大小移动。基于百分比的值是相对值，并根据父容器而变化。我做了JSFiddle to show what this looks like with your code。通过调整Web浏览器的大小，可以忠实地重现该问题。

要开始修改此更改您的页脚CSS。如果你想要一个看起来像这样的粘性/持久性页脚：

#footer{
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -50px;
}

我做了JSFiddle showing the solution so you can see this in action。当浏览器窗口调整大小或显示在其他设备上时，这应解决浮动到其他位置的页脚。

如果您希望页脚位于页面底部而不是粘在那里，您可以对CSS进行修改：

#footer{
    width: 100%;
    height: 50px;
    display: block;
    clear: both;
}

这样可以确保页脚停留在页面内容的底部，并且不会显示在上一个元素的一侧。既然你没有说明你是否想要一个粘贴页脚，我只是为了涵盖这个其他场景。

无论如何，希望这是您在网站上前进所需的信息。

页脚移动和坚持较低的分辨率

1 个答案: