Question

所以我有这个：

<div id="parent">
    <div id="child"></div>
</div>

样式如下：

#parent {
    width: 100%;
    padding: 10px;
}

#child {
    position: absolute;
    width: auto;
    left: 0px;
    right: 0px;
}

如何设置#parent以#child为高度增长和缩小。

我知道将孩子设置为绝对定位将其拉出常规流程，因此父元素失去了查看孩子身高的能力，但是有什么方法可以清除它，就像你可以用漂浮物一样吗？ / p>

Answer 1

在CSS中，控件总是从上到下流动，因此孩子的身高可以由父母控制，但不能相反。您可以使用以下jquery来实现您的目标：

var resizeParent = function() {
  var child_height = $('#child').height();
  $('#parent').height(child_height);
};

$(window).resize(function() {
  resizeParent();
});

$document.ready(function() {
  resizeParent();
});

如何设置绝对定位元素的父级高度与子项生长/缩小

1 个答案: