如何根据包含滚动的大小来更改div高度

Question

我遇到了一个问题，我需要2个div高度来填充屏幕，无论浏览器的尺寸/分辨率如何，包括滚动都会调整大小。

现在没有javascript它需要基于身体的高度，html与min-height。哪个好极了！除非您调整到较小的尺寸然后向下滚动。你最终得到了空白。 在这个例子中，我有两个div并排。都是50％。 Column1为黑色背景色，Column2为白色背景色。我已经离开并添加了一些javascript，每次我调整大小只是不断增加额外的高度，滚动条变得非常大。

图像一显示它是正常的。 图2显示了调整大小后的情况。增加了一吨额外的高度。注意滚动条

以下是我的代码。

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;
}

的Javascript

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

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

Answer 1

为了防止两个div填满高度，无论彼此的大小如何，你甚至不需要Javascript ......

JS resize事件很重，并且有很多仅限css的解决方案。

例如，您可以将#panelWrapper设为display: table，并将列div设为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