Question

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

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

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

谢谢！

Answer 1

我不是正面的，但我认为你想要使用一些绝对定位。

JSFiddle Demo

您也可以设置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 demo

以积极的方式让div填满其父级

3 个答案: