流體div寬度為100％

Question

我有一個類似下面的帶有邊欄和主容器的html結構。 我想要的是具有一個固定寬度的側邊欄（稍后通過媒體查詢對其進行更改）和一個流暢的主容器。 這意味着如果我減小瀏覽器的寬度，則主容器的寬度應減小，而邊欄不會減小。

我已經嘗試過#container的100％寬度，邊欄的15％寬度和主容器的85％寬度，但這（當然）也減小了邊欄的寬度。 僅使用主容器的100％寬度和側邊欄容器的固定寬度似乎不起作用。

解決此問題的最佳方法是什么？

HTML：

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

 ________________________
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
--------------------------

Answer 1

使用以下CSS

.container{display:block; padding:0 0 0 200px;}
.sidebar{display:block; float:left; width:200px; margin:0 0 0 -200px;}
.main{display:block; width:100%}

Answer 2

小提琴 ： http : //jsfiddle.net/3ApFZ/

CSS ：

#sidebar{
    width:150px;
    position: absolute;
    background:blue;
    height:100%;

}
#main{
    width:100%;
    padding-left: 150px;
    background:red;
    height:100%;
}

Answer 3

幾天前，我為某人提供了類似的幫助。 如果您使用以下演示怎么辦

基本上將左側設置為固定寬度，右側設置為可調整大小

.left {width:100%; height:20px; background-color:red; float:left; margin-left:-320px; display:inline}
.right {width:320px; height:20px; background-color:blue; float:right; display:inline}