Javascript 使div在不设置高度的情况下可滚动_Javascript_Html_Css

Javascript 使div在不设置高度的情况下可滚动

javascript html css

Javascript 使div在不设置高度的情况下可滚动,javascript,html,css,Javascript,Html,Css,如何使div可滚动，而无需硬编码其高度？通常，当您想要使div可滚动时，需要设置max height，否则它将被扩展 #element { overflow:auto; max-height: 100px; } 在我的例子中，我希望高度由父级高度限制（并且父级可以调整大小），而不是通过在CSS中设置它以下是JSFIDLE：将其设置为等于父对象的高度看到了吗编辑：注释正确：需要向父级添加填充 #parent {padding-bottom: 1em;} 将其设置为等于

如何使div可滚动，而无需硬编码其高度？通常，当您想要使div可滚动时，需要设置max height，否则它将被扩展

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

在我的例子中，我希望高度由父级高度限制（并且父级可以调整大小），而不是通过在CSS中设置它

以下是JSFIDLE：

将其设置为等于父对象的高度

看到了吗

编辑：注释正确：需要向父级添加填充

#parent {padding-bottom: 1em;}

将其设置为等于父对象的高度

看到了吗

编辑：注释正确：需要向父级添加填充

#parent {padding-bottom: 1em;}

为了使

#content

拉伸以填充父元素中减去

#title

元素高度的剩余空间，可以使用CSS或JS进行拉伸。CSS解决方案很简单，但您必须调整顶部的偏移量，以确保其正确匹配。通过将其他三个偏移（左、下和右）设置为零，我们可以强制

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

为了获得更具响应性的解决方案，您需要依靠JS获取

#title

的高度，然后相应地设置

#content

的

top

属性-这样做的好处是，当视口大小改变时，它也会很好地响应

#title

的高度改变

对于CSS，与上面相同，但我们删除了

top

声明。相反，我们将其委托给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();
});

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

它是响应性的-通过将
```
setContentHeight（）
```
函数绑定到任何可以预见将更改
```
#title
```
维度的事件，您始终可以重新计算
```
top
```
更改
```
#title
```
或其任何子项（如果存在）的填充、边距、高度（最小值、最大值或高度）、行高时，无需手动更新
```
top
```
值

为了使

#content