html - 是否有可能溢出带有固定子容器的父容器？

Question

我有一个具有自动高度的父元素(例如，我添加了 300 像素的高度用于测试 pupose)和一个位置为固定的子元素。即使 child 的位置固定，是否可以将父元素拉伸(stretch)到与 child 一样长？

<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 以使父项的高度和宽度与子项相匹配的示例:

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

请记住，如果子元素固定，它不会与父元素同步滚动，因此这仅适用于设置它们的初始大小以匹配。它不能确保它们的位置在滚动时会继续匹配。

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

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

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

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

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

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