브라우저에서 이동하는 HTML/CSS div 크기 조정

Question

페이지를 채우기 위해 필요한 div가 두 개인 있습니다. 그 중 하나는 자동으로 크기가 조정되고 다른 하나는 고정되어 있습니다. 크기를 조절하는 것은 왼쪽에 있고, 고정 된 것은 오른쪽에 있습니다. 브라우저가 전체 화면 일 때 완벽하게 작동하지만 브라우저를 특정 크기로 크기를 조정하면 크기가 조정 된 div가 고정 된 div 바로 아래로 이동하는 반면 고정 div는 올바른 위치에 배치됩니다. 브라우저 창 크기를 조정할 때 div를 넣을 수있는 방법은 무엇입니까?

HTML :

<div class=wrapper> 
    <div class=right> 
     Right Fixed Sidebar 
    </div> 

    <div class=main> 
     Main Resizing Content 
    </div> 
</div> 

CSS : 그래서

.wrapper{ 
margin-top: 25px; 
min-width: 630px; 
} 
.main{ 
overflow: hidden; 
font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif; 
font-size: 20px; 
font-weight: 100; 
margin-left: 25px; 
height: 250px; 
background: green; 
} 
.right{ 
float: right; 
width: 300px; 
height: 250px; 
font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif; 
text-align: center; 
margin-right: 10px; 
margin-left: 10px; 
background: orange; 
} 

Answer 1

, 같은 당신이 (안드로이드 브라우저 < 4.4을 제외하고, 모든 실제 브라우저) IE9 + 해결할 수있는, 당신을 꽤 단순하지만 메가 강력한 것을 할 수 있습니다.

HTML :

<div class=wrapper> 
    <div class=main> 
     Main Resizing Content 
    </div><div class=right> 
     Right Fixed Sidebar 
    </div> 
</div> 

CSS :

.wrapper { 
    margin-top:25px; 
    min-width:630px; 
    height:250px; 
} 

.right, 
.main { 
    display:inline-block; 
    vertical-align:top; 
    height:100%; 
} 

.right { 
    width:300px; 
} 

.main { 
    width:calc(100% - 300px); 
} 

빠른 설명 :

• display:inline-block;
  합니다 ... vertical-align:top;block 모든 요소 영광을 가지고 있지만, 인라인으로 표시 할 수 있습니다 요소에 대해 다른 높이를 원했을 경우를위한 것입니다.
• 당신은 ... 같은 동일 용기의 전체 폭을 뺀 고정 폭 (보이는 정확히 수행하는 calc()을 사용하는 .main 요소의 오른쪽
• 폭의 사이드 바의 고정 폭을 설정

Here is a jsFiddle showing a working model.

대체 광고

)이 오른쪽 사이드에 시원한 것은 display:inline-block;가 다시 작동한다는 것입니다 IE8, 그래서 당신이 가지고있는 유일한 대체 관련 우려는 너비를 설정하는 것입니다.

Modernizr과 같은 기능 감지 라이브러리를 사용하는 경우 (그렇지 않은 경우 있어야 함) CSS와 JS를 결합하여 작업을 수행 할 수 있습니다.

JS :

if(!Modernizr.csscalc){ 
    var container = document.querySelector('.wrapper'), 
     main = container.querySelector('.main'), 
     right = container.querySelector('.right'); 

    main.style.width = (container.clientWidth - right.clientWidth); 
} 

방금 ​​도서관 무신론자로 노력하고, 당신이 구문을 사용할 수 있습니다 jQuery를 사용하는 경우. 당신은 문서가로드되었는지 여부를 확인해야하는 것을 피한다

<!--[if lte IE 8]> 
    <script type="text/javascript"> 
     var container = document.querySelector('.wrapper'), 
      main = container.querySelector('.main'), 
      right = container.querySelector('.right'); 

     main.style.width = (container.clientWidth - right.clientWidth); 
    </script> 
<![endif]--> 

몸의 바닥에 그것을 퍼팅 : 당신이 모더 나이저를 사용하지 않는 경우, 당신은 신체의 하단에있는 조건부 주석에 넣어 수 있습니다 그걸로 잘해야합니다.