Question

我有一个自动高度的父级（在示例中我添加了高度300px用于测试pupose）和子元素的位置：固定。即使孩子有固定的位置，是否有可能伸展父母elem？

<div class="parent">
  <div class="fixed"></div>
</div>

.fixed {
  position: fixed;
  height: 750px;
  width: 100%;
  background: red;
  opacity: 0.5;
  margin: auto;
}

.parent {
  height: 300px;
  background: yellow;
 }

此处示例 https://jsfiddle.net/hz0wgx1w/

Answer 1

我无法单独使用CSS来解决这个问题，但是这里有一个使用jQuery来更新CSS以便父母的身高和宽度与孩子相匹配的例子。 S：

https://jsfiddle.net/hz0wgx1w/13/

请记住，在修复子项后，它不会与父项同步滚动，因此这仅适用于设置其初始大小以匹配。滚动时，它无法确保其位置将继续匹配。

这也没有考虑响应性，因此在页面加载后对子项宽度的任何更改都不会导致父级更新，尽管这也可以通过jQuery轻松完成，具体取决于您的目标。

我保留了您的HTML，但如果您打算在其他元素上重复使用这些类，那么使用不同的ID而不是类会更安全。

＆＃13;

$(".parent").css("height", $(".fixed").css("height"));
$(".parent").css("width", $(".fixed").css("width"));

＆＃13;

.fixed {
  position: fixed;
  height: 750px;
  width: 100%;
  background: red;
  opacity: 0.5;
  margin: auto;
}

.parent {
  height: 300px;
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="fixed"></div>
</div>

＆＃13;

有固定孩子的overflo父容器是否可能？

1 个答案: