jquery - 让 div 填充其父级的响应式方法

Question

我有两个 div 包含在一个包装器中，其大小与主体的高度相关。其中一个 div 具有固定的高度，另一个应该填满包装 div 并让溢出的内容滚动（仅内部 div）。

小提琴：http: //jsfiddle.net/HvC7K/

通常我通过 jQuery 计算“#contactlist”的高度，但这次我需要页面响应。当我调整浏览器窗口的大小时，“#contactlist”停留在其定义的高度。每次身体大小发生变化时我是否必须重新计算高度，或者有没有办法在 CSS 中完成它？

谢谢！

Answer 1

我不积极，但我认为你想使用一些绝对定位。

JSFiddle 演示

您也可以设置overflow: auto;，除非必要，否则滚动条不会显示。

Answer 2

这是 jQuery 解决方案

#contactlist CSS高度调整：

#wrapper { width: 200px; height: 400px; border: 4px solid black; }
#header { height: 50px; border: 2px solid red; }
#contactlist { overflow: scroll; height: 344px; border: 2px solid blue; }

（只修改了联系人列表的高度）

jQuery代码（替换你的）：

h = $('#wrapper').height() ;

windowh = $(window).height();

$(window).resize(function(){

  var newh = h + ($(this).height() - windowh);
  $('#wrapper').height(newh);
  $("#contactlist").height(newh-56); //56 = 50 for header + 6 for border

});  

使用此代码，在调整窗口大小的同时，您可以增加或减少两者的高度#wrapper以及#contactlist滚动。

小提琴演示：http: //jsfiddle.net/ajp9h/

Answer 3

#wrapper { width: 200px;border: 4px solid black; }
#header { height: 50px; border: 2px solid red; }
#contactlist { overflow: visible; border: 2px solid blue; }

删除包装高度并使用overflow:visible;

我不确定这是否是你想要的

Jsfiddle演示