CSS將導航擴展爲內容長度

我已經嘗試了很多關於如何讓我的導航擴展到我的內容底部的Stack Overflow的建議。沒有任何建議似乎對我有用。CSS將導航擴展爲內容長度

現在，我正在將html和body設置爲height: 100%;並且這不起作用。

有人可以提供一些建議嗎？

http://jsfiddle.net/8XsAY/

基本上，我只是想左，右導航條延伸到內容div的大小。 div#leftNav.height = div#content.height

我知道這是可能的JavaScript，但我想避免，如果可能的話。

謝謝！

UPDATE：

謝謝大家對你的反應。我一直無法工作，很可能是因爲我自己無法使用CSS進行樣式設計。因此，我用JavaScript來解決這個問題。

使用jQuery：

$(window).load(function() { 
    navHeightAdjust(); 
}); 

$(window).resize(function() { 
    navHeightAdjust(); 
}); 

function navHeightAdjust() { 
    var contentHeight = $("div#content").height(); 
    var leftNavHeight = $("div#leftNav").height(); 
    var rightNavHeight = $("div#rightNav").height(); 

    var newHeight = Math.max(contentHeight, leftNavHeight, rightNavHeight); 

    $("div.nav").height(newHeight); 
};

來源

2014-03-26 Clete2

嘗試把＃內容高度100％旁註：你的頁腳是在年底清算浮動，因此你的右側和左側導航不會觸摸到頁面底部。如果你需要調試你也可以把邊框：1px純紅色#content檢查

希望它有幫助！

來源

2014-03-26 15:34:50

簡單地增加'高度：100％;'至＃內容不是招」工作。我剛剛在小提琴中嘗試過它，除了頁腳與文本重疊之外，它沒有改變任何內容。我不太關心頁腳;我可以稍後解決。 – Clete2

嗯，你可能想檢查http://somacss.com/fullheight.html在這個頁面中找到這部分「這裏有5種不同的方式」 –

我不確定天氣你避免硬編碼你的身高，但如果你改變身高：100％身高：1650px它會工作。

div.nav { 
    border-style: solid; 
    border-top-width: 0px; 
    border-left-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    background-color: #B2A58A; 
    width: 10%; 
    padding: 0.5%; 
    height: 1650px; 
}

我還添加了背景顏色：黑色僅用於演示目的。你可以隨時刪除它。

div#footer { 
    clear: both; 
    text-align: center; 
    color: #B2A48A; 
    font-weight: bold; 
    background-color:black /* to test */ 
}

來源

2014-03-26 15:46:37 GeekByDesign

是的，我試圖避免硬編碼的高度。我希望它能縮放到內容長度。我可以很容易地通過硬編碼工作，但我更喜歡可擴展性。更不用說，如果您調整頁面大小，那麼最終文本也會溢出1650像素。 – Clete2

添加overflow:hidden內div#main 並添加

margin-bottom: -1000px; 
padding-bottom: 1000px;

內div.nav它會像魔法

JSFIDDLE DEMO

來源

2014-03-26 15:58:02

這似乎不適用於我。 Chrome 32和IE 9都有。它在你的JSFiddle上工作嗎？ – Clete2

啊似乎這不是一個瀏覽器獨立的解決方案..也可以是我將設計新的結構問題並檢查。 –

CSS將導航擴展爲內容長度

回答

相關問題