更新我的代碼的其他部分後，我的頁腳不斷移動。我該如何解決？

如何將頁腳保留在頁面底部？我已經通過stackoverflow搜索，並沒有什麼似乎修復它。頁腳coninue遍佈整個地方，但永遠不會結束在底部請幫助。更新我的代碼的其他部分後，我的頁腳不斷移動。我該如何解決？

<!DOCTYPE HTML> 
<html> 

<head> 
    <link type="text/css" rel="stylesheet" href="dereke.css"/> 
    <title> 

    </title> 
</head> 

<body> 
    <div class="Header"> 
     <p>Ohio State Buckeyes</p> 
     <div id="logo"> 
      <img src="http://vignette2.wikia.nocookie.net/logopedia/images/6/6f/1000px-Ohio_State_Buckeyes_logo_svg.png/revision/latest?cb=20130425230958" /> 
     </div> 
     <div id="navbar"> 
      <ul> 
       <li>Home</li> 
       <li id="noUD">|</li> 
       <li>About Us</li> 
       <li id="noUD">|</li> 
       <li>Contact Us</li> 
      </ul> 
     </div> 
    </div> 
    <div class="MidBody"> 
     <div id="leftbody"> 
      <img src="http://printableteamschedules.com/images/collegefootball/ohiostatebuckeyesfootballschedule.gif" /> 
     </div> 
     <div id="rightbody"></div> 
     <div id="lowerbody"> 
      <img src="http://grfx.cstv.com/schools/osu/graphics/facilities/stadium-night-800x325.jpg" /> 
     </div> 
    </div> 
    <div class="footer"></div> 

</body> 

</html>

我知道這個問題是在CSS：

.Header { 
    width: calc(100%-16px); 
    height: 150px; 
    border-radius: 5px; 
} 
.Header p { 
    color: white; 
    margin-top: -5px; 
    width: 600px; 
    font-size: 70px; 
} 
.MidBody { 
    background-color: #141414; 
    width: 100%; 
    height: 850px; 
    margin-top: 10px; 
    border-radius: 5px; 
    position: absolute; 
    display:block; 

} 
.footer { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height:100px; 
    width: 100%; 
    margin-top: -3em; 
    background-color: #CCCCCC; 
    border-radius: 5px; 
} 
#leftbody { 
    width: 49%; 
    height: 425px; 
    left: 0; 
    margin-top: 3px; 
    margin-left: 3px; 
    position:absolute; 
    z-index: 1; 
    border-radius: 5px; 
} 
#leftbody img { 
    width: 490px; 
    height: 420px; 
    border-radius: 5px; 
    margin-top: 2px; 
    margin-left: 2px; 
} 
#rightbody { 
    background-color: #F1F1F1; 
    width: 49%; 
    height: 425px; 
    right: 0; 
    margin-top: 3px; 
    margin-right: 3px; 
    position:absolute; 
    z-index: 1; 
    border-radius: 5px; 
} 
#lowerbody { 
    width: 99%; 
    height: 49%; 
    right: 0; 
    left: 0; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 432px; 
    margin-bottom: 2px; 
    border-radius: 5px; 
    postion: relative; 
} 
#lowerbody img { 
    width: 800px; 
    height: 325px; 
    border-radius: 5px; 
} 
body { 
    background-color: black; 
} 
li { 
    display: inline; 
    padding: 1px; 
    text-decoration: underline; 
} 
#navbar { 
    width: 350px; 
    color: #F8F8F2; 
    font-family: Arial Black; 
    margin: -35px; 
    text-align: left; 
    line-height: 10px; 
} 
#noUD { 
    text-decoration: none; 
} 
#logo img { 
    margin-top: -150px; 
    margin-right: 50px; 
    width: 15%; 
    height: 15%; 
    float: right; 
}

來源

2016-03-12 Derek Edwards

你是什麼意思「更新部分代碼」？你能提供一個現場演示或小提琴嗎？順便說一句：在兩個元素上聲明相同的「id」是無效的，但這不太可能導致問題。 – Arsylum

您定義position: absolute;上.MidBody，#rightbody，並#leftbody，從文檔流刪除它們，並允許頁腳漂移到導航鏈接。將它們更改爲position: relative;，並從中刪除top,left,bottom和right屬性，因爲這些屬性僅適用於position: absolute元素。

您還可以修復position在#lowerbody。

此外，靜態height屬性設置上.MidBody，並在#lowerbody的margin-top: 432px;是造成他們顯示你過去的.footer元素。

解決這些問題會將頁腳放到頁面的底部（但您仍然會遇到許多其他需要注意的格式問題）。您可以使用我設置的這個JSBIN繼續測試您的頁面格式，直到它看起來如何。

祝你好運。

來源

2016-03-12 23:35:58

謝謝。我還剛剛開始練習創建佈局。但我真的很感激它！ –

我改變了所有這一切，現在我的右側身體是從左側身體的對角線，我需要它們並排。這是我的語法嗎？ –

是的，'＃rightbody'和'＃leftbody'應該包含在另一個'div'中，並且每個都設置爲50％的寬度（以將它們從'＃lowerbody'中分開）。或者，您可以查看媒體查詢以使佈局也可以在較小的屏幕上工作。 –

更新我的代碼的其他部分後，我的頁腳不斷移動。我該如何解決？

回答

相關問題