右邊有內容的左側流體邊欄;將不會漂浮在彼此旁邊，寬度爲100％

我遇到了流體邊欄和旁邊有內容框的問題。右邊有內容的左側流體邊欄;將不會漂浮在彼此旁邊，寬度爲100％

我設計了我的左側#sidebar以符合我的喜好，但是我無法制作填充其旁邊剩餘空間的內容框。

我希望整個項目佔用頁面寬度的100％。問題來自側欄上的最小/最大寬度。

這一整天都在努力，仍然有問題，空隙之間，重疊等。

http://jsfiddle.net/DrDavidBowman01/PjLgE/

CSS

#container { 
width: 100%; 
display: block; 
height: 100%; 
    } 
#sidebar { 
display: block; 
width: 22%; 
float:left; 
min-width: 236px; 
max-width: 332px; 
height: 100%; 
position: fixed; 
border: 2px solid #0C6; 
background-color: #000; 
} 
#content { 
width: 88%; 
height: 400px; 
border: 6px solid #F00; 
display: block; 
color: #fff; 
float: left; 
position: relative; 
max-width: calc(88% - 236px); 
min-width: calc(88% - 332px); 
}

HTML

<div id="container"> 
<div id="sidebar"></div> 
<div id="content"></div> 
</div>

來源

2014-04-07 user3504428

這是兩件事情的組合。首先，如果你想讓divs佔用100％的高度，那麼你需要設置body和html。

html, body { 
    height: 100%; 
}

其次，您已將邊欄設置爲position: fixed。這就像設置了position: absolute一樣。如果您希望側欄始終保持可見狀態，則可以在#content上執行margin-left: 22%;（或側欄的任意寬度）。如果您希望側欄與頁面的其餘部分一起流動，請移除固定位置。

來源

2014-04-07 21:06:20

明白了。十分感謝。欣賞它。 – user3504428

有趣的是，我自己在那邊。 – user3504428

你很好，塊元素的高度是一個常見的誤解，因爲它們的高度是由其_children_的相對高度的總和決定的。與塊元素的寬度相比_parent_元素的寬度。 –

這是因爲你的側邊欄position: fixed。最佳路線是相對將側邊欄定位/浮動到100％的高度，並在其中放置固定的包裝。

basic demo

來源

2014-04-07 21:00:16

右邊有內容的左側流體邊欄;將不會漂浮在彼此旁邊，寬度爲100％

回答

相關問題