사이트 콘텐츠 확장 및 축소

Question

사이드 바가 일정한 너비이지만 브라우저 너비에 따라 "사이트 콘텐츠"영역이 확장되고 축소되는 간단한 전체 화면 사이트를 만들려고합니다. 여기

두 사진은 내가 뭘하려고 오전 시각화 있습니다 : 브라우저가 사이드 바 확장

http://i.stack.imgur.com/AKBme.png

http://i.imgur.com/ct3RN.png

은 여전히 ​​원래의 폭을 유지하지만, "사이트 콘텐츠가 "공간을 채우기 위해 거의 두 배가되었습니다.

내가 확장 사이트의 컨텐츠를 얻을 수 있었던 유일한 방법은 사이드 바, 예를 들어 확장 한 것입니다 :

<style> 
#sidebar{ 
width:20%; 
float:right; 
} 
#sitecontent{ 
width:80%; 
float:left; 
} 
</style> 

어떤 아이디어?

Answer 1

<style> 
#sidebar{ 
    width: 256px; /* Use a fixed width for your sidebar. */ 
    float: right; 
} 
#sitecontent{ 
    display: block; 
    float: left; 
} 
</style> 

Answer 2

응답 성있는 웹 사이트를 구축 할 때마다 재단으로 사용하는 훌륭한 자습서입니다.

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

건배를 (이 모바일 기기로 확장 할 수있는 사이트뿐만 아니라 계약의 모든 방법을 구축 포함).

Answer 3

이 시도 :

#sidebar { 
    float: left; width: 200px; /* or whatever */ 
} 
#sitecontent { 
    width: 100%; 
    box-sizing: border-box; // also -webkit-box-sizing, -moz-box-sizing, maybe -o-box-sizing 
    padding-left: 200px; /* same as sidebar */ 
} 

을 "경계 박스"상자가 IE에서 작동하지 것이다 — 크기 조정 사용하여보다 8 — 100 %로 컨텐츠 상자의 너비를 설정할 수 있습니다 에는 패딩 (및/또는 경계)이 포함되어 있습니다.