具有柔性（strechable）固定寬度的內容欄

Question

而不是試圖解釋這 - 這將是很難我已經創建了一個圖像 - 我無法創建佈局，其中： 側邊欄是柔性的，並且可以延伸到填充沒有被固定寬度爲725px的內容fiv所佔用的空白空間。

看一看圖像請:)

Answer 1

小小的定位巫術，似乎與你的照片相符：右邊的部分有f ixed寬度200px，剩下的一個（但從來沒有小於100px）。

#container { 
 
    position: relative; 
 
    min-width: 310px; 
 
} 
 

 
#container .left { 
 
    background-color: blue; 
 
    margin-right: 210px; 
 
    height: 200px; 
 
} 
 

 
#container .content { 
 
    float: right; 
 
    background-color: green; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

<div id="container"> 
 
    <div class="left">a</div> 
 
    <div class="content">b</div> 
 
</div>

演示：http://jsfiddle.net/nzd2J/2/。移動垂直分割條看它如何縮放。

Answer 2

我想這是你所需要的：http://jsfiddle.net/Shaz/GaZYt/1/

HTML：

<div id="contain"> 
    <div id="left"> 
     Left <br /> <br /> <br /> 
    </div> 

    <div id="right"> 
     Right 
    </div> 
</div> 

CSS：

#contain { 
    width 100%; 
} 

#contain #left { 
    min-width: 185px; 
    width: 100%; 
    border: 1px solid blue; 
    display: table-cell; 
} 

#contain #right { 
    min-width: 725px;  
    border: 1px solid red; 
    display: table-cell; 
}