오른쪽 div가 너비가 고정되어있을 때 왼쪽 div를 사용 가능한 모든 공간을 채우십시오.

Question

내 페이지에 divs : 메뉴가있는 하나 (왼쪽)와 내용이있는 두 번째 (오른쪽)가 있습니다. 오른쪽 div는 너비가 800 픽셀이고 가로로 가운데에 있어야합니다. 남은 공간을 모두 채우기 위해 왼쪽 div를 원합니다.

테이블 셀로 div를 표시하거나 왼쪽과 오른쪽으로 float을 설정하고 width : 100 %의 왼쪽 div span 요소를 넣으려고했지만 작동하지 않았습니다.

divs를 원하는대로 만들 수있는 방법이 있습니까?

Answer 1

이 시도 :

HTML

<div id="left"> 
    Menu 
</div> 
<div style="text-align: center;"> 
<div id="right"> 
    Content 
</div> 
</div> 

CSS

#left { 
    background-color: green; /*for demonstration purposes*/ 
    float:left; 
} 

#right{ 
    background-color: blue; 
    width: 800px; 
} 

JS

$(document).ready(function(){ 
    var width = $(document).width(); 
    var rightDivWidth = $("#right").width(); 
    var leftDivWidth = width - rightDivWidth; 
    $("#left").css("width", leftDivWidth); 
}); 

Demonstration