브라우저에 맞게 CSS 상자 크기 조정

Question

빠른 질문이 있습니다. 나는 상자의 너비가 브라우저 창 크기에 맞게 조정되기를 원합니다.

가 이 http://sc-cdn.scaleengine.net/i/1abc17e8e79b2c3739599001d3fe50f4.png가 (이미지)

이에 대한 코드는 ...

이

CSS

:

이

#container { 

} 

#main-container { 
    margin-left: 200px; 
    margin-top: 60px; 
    display: inline-block; 
} 

.user-stats-container { 
    margin-bottom: 25px; 
} 

#main-content { 
    border: 1px solid #eee; 
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1); 
    margin-bottom: 20px; 
    background-color: #fff; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); 
    box-shadow: 0 1px 1px rgba(0,0,0,.05); 
    padding: 15px; 
} 

HTML 코드는 :

<div id="notification-bar"> 
       notification bar Swag 
      </div> 

      <div id="container"> 

       <div id="side-bar"> 
        <div class="side-bar-container"> 
         side bar swag 
        </div> 
       </div> 

       <div id="main-container"> 

        <div class="user-stats-container "> 

         user stats swag 

        </div> 

        <div id="main-content"> 

         Main content swag 

        </div> 

       </div> 

      </div> 

main-content가 있습니다 기본적으로 나는이 있습니다 div 그것은 화면을 가로 지르도록 조정하려고합니다. 길이 현명하지만 끝까지 너무 가깝지는 않습니다. 나는 폭을 설정할 필요가 없다는 것을 확실히 알고있다. 왜냐하면 그것은 단지 그것을 제한하기 때문이다. 당신이 축소되면

이

geedmo.com/ themeforest/wintermin/dashboard.html

통지, 그 양은 여전히 ​​조정 방법 : 나는 명확하게 설명하고 있지 않다, 여기 내가 무슨 말의 예 화면에. 기본적으로 내 현재 main-content div에 대해 원하는 내용입니다.

여기에 바이올린입니다 : Fiddle

나 자신을 설명하고있어 경우에 나는 완전히 확실하지 않다, 나는 사과 않습니다.

감사합니다.

Answer 1

크리스, 당신이 메인 콘텐츠 사업부에 백분율을 사용뿐만 아니라 부모의 폭을 지정해야합니다 달성하고 싶다 무엇

.

그러나 사이드 바 및 콘텐츠 영역이 약간 펑키하게 설정되어 있기 때문에 왼쪽의 기본 콘텐츠 200 픽셀에 여백을 두어야 만하고 이에 따라 사이트의 반응을 상당히 어렵게 만듭니다. 당신은 무엇을해야 할 것 :

position:relative; 

뿐만 아니라 모든 왼쪽과 오른쪽 마진을 제거 :

사이드 바, 주요 컨테이너는 모두로 설정해야합니다.

그런 다음 사이드 바는 20 %의 폭을 가지고 있는지 확인

float:left; 

에 모두 용기를 설정하거나 기분이 어떤 크기 가장 적합, 80 %로 주요 컨테이너.

사이드 바 컨테이너를 고정 된 위치로 고정