스크롤을 사용하여 크기 조정을 기반으로 div 높이를 변경하는 방법

Question

브라우저 크기/해상도 등을 포함하여 크기를 조정할 때 화면 크기를 채우기 위해 2divs 높이가 필요한 문제가 발생했습니다.

자바 스크립트가없는 지금은 몸체를 기준으로 높이가 걸립니다. html은 최소 높이가됩니다. 어느 쪽이 위대한가! 작은 크기로 크기를 조정 한 다음 아래로 스크롤 할 때를 제외하고는. 당신은 공백으로 끝납니다. 이 예제에서는 두 개의 div가 나란히 있습니다. 둘 다 50 %. Column1은 검정색 배경색이고 Column2는 흰색 배경색입니다. 내가 갔고 일부 자바 스크립트를 추가하고 매번 크기를 조절하면 크기가 계속 추가되고 스크롤바가 엄청나게 커집니다.

이미지는 규칙적으로 보여줍니다. 이미지 2는 약간의 크기를 조정 한 후 보여줍니다. 1 톤의 추가 높이가 추가됩니다. 스크롤바에주의하십시오.

아래 코드는 제 코드입니다.

HTML

<div id="panelWrapper"> 
     <div id="column1"> 
     </div> 
     <div id="column2"> 
     </div> 
</div> 

CSS

body, html { 
margin:0; 
padding:0; 
min-height:100%; 
height:100%; 
} 

#panelWrapper { 
width:100%; 
position: absolute; 
} 

#column1{ 
position:absolute; 
width:50%; 
left:0; 
right:0; 
top:0; 
bottom:0; 
min-width: 481px; 
background-color: #000000; 
} 

#column2{ 
position:absolute; 
width:50%; 
left:50%; 
right:0; 
top:0; 
bottom:0; 
background: #FFFFFF; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
z-index: 999; 
min-width: 481px; 
} 

자바 스크립트

var bodyheight = $(document).height(); 
$("#column1, #column2").height(bodyheight); 

$(window).resize(function() { 
var bodyheight = $(document).height(); 
$("#column1, #column2").height(bodyheight); 
}); 

Answer 1

에 상관없이 서로 어떤 크기, 높이를 작성하지 둘 다 된 div를 유지하려면, 당신도 ...

자바 스크립트가 필요하지 않습니다

JS resize 이벤트는 무겁습니다. 많은 CSS 전용 솔루션이 있습니다.

예를 들어 #panelWrapper을 display: table으로 만들고 divs 열을 display: table-cell으로 만들 수 있습니다. 그것은 그들이 같은 높이임을 보장 할 것입니다.

그런 래퍼에 min-height: 100% 필요할 때 그들은 항상 남아있는 공간을 채우기 있는지 확인합니다 :

여기 개념을 표시 simple example입니다.

Answer 2

는 바이올린에이를 테스트하기 어렵다 그러나 이것을 시도해보십시오, 작동해야합니다. 당신은 함수에서 모든 것을 감싸고 단지 크기 조정에 함수를 호출 할 수 있습니다 :

function adjustHeight(){ 
    var bodyHeight = $(document).height(); 
    $("#column1, #column2").height(bodyHeight); 
} 

adjustHeight(); //call on page load 

$(window).resize(adjustHeight); //call on resize