유연한 (늘릴 수있는) 사이드 바를 사용하여 고정 너비의 콘텐츠

Question

설명하기보다는 이미지를 만들면 어려울 것입니다. 레이아웃을 만드는 데 문제가 있습니다 : 사이드 바는 유연하고 고정 너비가 725px 인 콘텐츠 fiv에서 사용하지 않는 빈 공간

이미지를 살펴 내가이 생각하고

Answer 1

작은 위치 지정 요술, 그림과 일치하는 것 같습니다 : 오른쪽 부분은 f를가집니다. 너비는 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; 
}