我有一个具有自动高度的父元素(在示例中,我为测试pupose添加了高度300px)和一个具有position:fixed的子元素。即使子元素有一个固定的位置,它也有可能将父元素拉伸到子元素的长度吗?

<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/

最佳答案

我想不出单独使用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>

09-10 05:32
查看更多