Question

如何使div可滚动，而不对其高度进行硬编码？通常当你想让div可滚动时，你需要设置max-height，否则它将会扩展。

#element {
    overflow:auto;
    max-height: 100px;
}

在我的情况下，我希望高度受父母身高限制（父亲可以调整大小），而不是在CSS中设置。

这是JSFiddle： http://jsfiddle.net/mbrnwsk/58qSc/1/

Answer 1

height:100%;

将其设置为父母身高。

见here

编辑：评论是正确的：需要向父母添加填充

#parent {padding-bottom: 1em;}

Answer 2

为了让#content拉伸以填充父级中的剩余空间减去#title元素的高度，您可以使用CSS或JS来完成。 CSS解决方案很简单，但您必须调整top的偏移量以确保其正确匹配。通过将其他三个偏移（左，底和右）设置为零，我们可以强制#content元素完全伸展。

#parent {
    border: 3px solid;
    height: 150px;
    position: relative;
}
#content {
    overflow-y: auto;
    overflow-x: hidden;
    background: cyan;
    top: 16px; /* This is based on the assumption that #title has a height of 16px */
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

http://jsfiddle.net/teddyrised/58qSc/3/

对于响应更快的解决方案，您需要依赖JS来获取#title的高度，然后相应地设置top的{{1}}属性 - 这样做的好处是当视口大小发生变化时它也会很好地响应，当#content的高度发生变化时也是如此。

对于CSS，它与上面相同，但我们删除了#title声明。相反，我们将此委托给JS：

top

http://jsfiddle.net/teddyrised/58qSc/4/

基于JS的解决方案的优势在于：

响应迅速 - 您始终可以通过将$(function() { $("#parent").resizable(); // Function to set height var setContentHeight = function() { $('#content').css('top', $('#title').outerHeight()); } // Recalculate when viewport changes // You can also bind this function to events that manipulate the dimension of #title $(window).resize(setContentHeight); // Run once when DOM is ready setContentHeight(); });功能绑定到您可以预见会更改top维度的任何事件来重新计算setContentHeight()。
当您更改填充，边距，高度（最小值，最大值或高度），#title的行高或任何值时，您不必手动更新top值它的孩子（如果他们存在）

使div不可设置高度可滚动

2 个答案: