유체 DIV를 사용 가능한 전체 너비로 확장하려면 어떻게합니까?

Question

내가 왼쪽 고정 폭 오른쪽 사이드 바 사이에서 사용 가능한 공간을 차지 유체 영역에 주요 내용이 같은 플로트 모든과 레이아웃을 가지고는 : 왼쪽 -

#left-sidebar {width: 200px;} 
#right-sidebar {width: 300px;} 
#main-content {margin-left: 200px; margin-right: 300px} 

내가 물건 경우 # main-content 모든 것이 예상대로 작동합니다.

# 메인 콘텐츠의 콘텐츠가 거의 없으면 너비가 축소되어 내 레이아웃이 고르지 않습니다.

나는 # 메인 컨텐츠

<div>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div> 

의 끝 부분에 추가하고 숨겨진로 가시성을 설정하는 매우 우아 해킹을 사용하고 있습니다.

그런 식으로 사용할 수있는 너비까지 확장 될 것이지만 나는 덜 해킹 된 것을 기대하고 있습니다.

과 같이

(도없이, 100 %, # 메인 컨텐츠 폭, 또는 내 일부 요소의 폭을 설정하는 것과 같은 간단한는 해결책이 아니다. 말)

Answer 1

당신은 100 %의 폭을 뺀 사이드 바의 폭을 설정 CSS3 Calc를 사용할 수 있습니다

/* Assuming 200px for each sidebar */ 

#main-content { 
    width: calc(100% - 400px) 
} 

데모 : http://jsfiddle.net/wDMfF/

Answer 2

가지고 당신의 CSS를

#left-sidebar {float:left;width: 200px;} 
#right-sidebar {float:right;width: 300px;} 
#main-content {display:block;overflow:hidden;} 

HTML에서 이것은 매우 중요합니다., 우선 사이드 바를으로 초기화 한 다음 나중에 내용 div를 초기화하십시오. 또한 clearfix 클래스와 함께 래퍼를 사용할 수도 있습니다.