頁腳移動和粘在較低分辨率

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>"; 
?> 

所以我把它分開這樣

介紹。 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; 
} 

這只是確保頁腳保持在底部頁面內的內容，並且不出現在前一個元素的一側。既然你沒有指定你是否想要一個小腳丫，我只是爲了掩蓋這種情況。

在任何情況下，希望這是你需要向前移動網站上的信息。