如何將div從導航欄拖到頁腳？

我做了一個非常簡單的網站。您可以在這裏看到頁面（代碼如下）：https://googledrive.com/host/0B2uK7byfkiwySHc5eU5CM25kcmM/index.html 如何將div從導航欄拖到頁腳？

我的問題是內容div（帶示例代碼，正下方的導航欄）。我需要它到達頁腳。無論我如何調整頁面大小，都不需要根據頁面調整頁面大小，也不需要在頁面和頁腳之間留下太多空間。

如果內容中的內容不需要這樣做，我可以確定它沒有達到底部，但是，如果內容是可滾動的，我需要它到達頁腳。另外，我不希望整個頁面滾動，只有這個內容div。

我已經嘗試了很多解決方案（容器div，表，jquery調整大小等）失敗，並失去了如何可以完成。所以，我上傳的基本代碼沒有我的解決方案，看看有人可以幫我:)

謝謝！

<html> 
    <head> 

    <style type="text/css"> 

    body { 
     background: #e6e6e6; 
    } 

    #title{ 
     margin:0 0 0 0; 
     text-align: center; font-size:40px; 

     font-family: "League-Gothic", Courier; 
     color: #707070; font-weight:600; 
    } 

    #navbar ul { 
     margin: 0; padding: 5px; 
     list-style-type: none; 
     text-align: left; background-color: #005ab3; 

     border-top-left-radius: 5px; 
     border-top-right-radius: 5px; 
    } 

    #navbar ul li { 
     display: inline; 
     font-family: Arial; 
    } 

    #navbar ul li a { 
     text-decoration: none; 
     padding: .2em 1em; 
     color: #fff; 
     background-color: #005ab3; 
    } 

    #navbar ul li a:hover { 
     color: #005ab3; 
     background-color: #fff; 
    } 

    #content { 
     background-color: #fff; font-family: Arial; 
     border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; 
     padding: 5px; padding-left: 15px; padding-right: 15px; 

     height: 70%; 
     overflow: auto; 
    } 

    #footer { 
     position: fixed; 
     bottom: 0; left:0; width: 100%; 

     background: #005ab3; 

     line-height: 2; 
     text-align: center; color: #fff; 
     font-size: 15px; font-family: sans-serif; 
    } 

    </style> 
    </head> 

    <body> 
     <div id = "title">Title</div> 

     <div id = "navBar"> 
     <ul> 
      <li><a id ="link1" href="#">Link 1</a></li> 
      <li><a id ="link2" href="#">Link 2</a></li> 
      <li><a id ="link3" href="#">Link 3</a></li> 
     </ul> 
     </div> 

     <div id = "content"> 

     <h1> Sample content (1984)</h1> 
     <p>It </p> 
     <p>The </p> 
     <p>Inside </p> 
     <p>Outside, </p> 
     <p>Behind </p> 
     <p>Winston </p> 
     <p>The </p> 
     <p> WAR IS PEACE </p> 
     <p> FREEDOM IS SLAVERY </p> 
     <p> IGNORANCE IS STRENGTH </p> 

    </div> 

    <div id = "footer">Footer</div> 

    </body> 
</html>

來源

2014-03-24 delta

重複http://stackoverflow.com/questions/3937372/making-a-div-extend-all-the-way-down-to-the-bottom-of-the-page的 – Adam

取看看粘性頁腳：http://ryanfait.com/sticky-footer/ – ntgCleaner

@亞當，我已經看到了qs之前 - 並再次嘗試解決方案，以確保它是不同的。這只是試圖將頁腳保留在頁面的底部。我正在嘗試在頁面底部顯示一個始終可見的頁腳，因此根本不需要滾動頁面，只需滾動內容div即可。 – delta

看看這個小提琴：http://jsfiddle.net/c92z2/

我想我明白你說什麼，我在這裏有很大答案：CSS 100% height with padding/margin

他寫舒展的好方法一個內容框。

.stretchedToMargin { 
    display: block; 
    position:absolute; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin-top:20px; 
    margin-bottom:20px; 
    margin-right:80px; 
    margin-left:80px; 
    background-color: green; 
}

來源

2014-03-24 23:56:59 ntgCleaner

謝謝！在我看到這個之前，我實際上已經得到了幫助並修復了它，但是我已經以幾乎相同的方式實現了它。這實際上可能會好一點，將會嘗試它！ – delta

看看這個jsFiddle。

讓我知道如果這不是你要找的。

.title-bar { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    background-color: #ccc; 
}

來源

2014-03-24 23:28:40 Siva

有點兒。有沒有辦法讓中間的div可以滾動，而不是整個頁面？ – delta

對不起，你是指我的中間div而不是整個頁面？現在，頁眉和頁腳是靜態的/固定的。內容div是唯一滾動的。你可以請精心製作的中間div是可滾動的嗎？ – Siva

我修好了，可以告訴你，如果你想。但是，我的問題是我只想在中間的div中使用滾動條。我想清楚，該頁面本身是靜態的。雖然你的修補程序在最後做了同樣的事情，但它以不同的方式完成了:) – delta

如何將div從導航欄拖到頁腳？

回答

相關問題