CSS自動高度div不能正確定位本身

我想要獲得一個簡單的頁面佈局，其中導航欄垂直沿用戶窗口的右側坐，佔用不超過20％的可用空間。剩餘的80％左側的空間用於內容。CSS自動高度div不能正確定位本身

我希望整個頁面可以調整大小，所以無論瀏覽器窗口有多大或多小（合理），內容都會調整到用戶的屏幕。一切正常，並調整大小，但navBar有一個問題。這裏有一個CSS摘錄：

body{ 
    background-color: #111111; 
    font-family: Roboto; 
    color: #cccccc; 
    font-weight: 300; 
    font-size: 14pt; 
    height: 100%; 
} 

#content{ 
    width: 80%; 
    float: left; 
} 

#navBar{ 
    width: 20%; 
    height: 100%; 
    background-color: #00C9FF; 
    float: left; 
    position: absolute; 
} 

#welcome{ 
    background-color: #222222; 
    text-align: center; 
    margin: 1%; 
}

問題：

如果我離開上面是代碼，導航欄呈現在屏幕的右側，因爲它應該，但它是不是瀏覽器窗口的高度的100％。請注意，當瀏覽器窗口的WIDTH改變時，它仍會調整大小。
如果我將navBar的位置設置爲絕對位置（位置：絕對），則導航欄完全呈現它應呈現的方式，除非它浮動到瀏覽器的左側，基本上使其位於應該出現的位置的完全相反側。

演示：http://codepen.io/anon/pen/YPyvzO（刪除的位置是：絕對的，看看那裏的導航欄應呈現）

我已經嘗試了幾種不同的東西，包括CSS設置「HTML」身高：100％和幾個不同的位置導航欄的屬性，都無濟於事。我只想用CSS做這件事，但我不確定它是否可行。

來源

2014-12-03 Alcolawl

當你添加'position：absolute;正確：0;''到＃navBar'？ – 2014-12-03 04:22:57

@MisterDood它修復了它。我不認爲這樣的財產在使用浮動時會起作用。顯然我不需要浮動div。謝謝！ – Alcolawl 2014-12-03 04:27:48

不客氣。我將其添加爲答案。 – 2014-12-03 04:30:59

添加以下內容：

position: absolute; 
    right: 0;

到#navBar。有一件事花了我很長時間才明白，position: absolute覆蓋一切，甚至漂浮。

來源

2014-12-03 04:30:36

當您調整瀏覽器的寬度和高度更改時，爲此目的，您必須在CSS中使用媒體查詢，並且必須告知瀏覽器在此寬度中導航欄應該處於給定寬度。另一個選擇是你可以使用bootstrap，在bootstrap中你不會寫太多的css。所有的工作變得簡單。

來源

2014-12-03 04:37:42

CSS自動高度div不能正確定位本身

回答

相關問題