如何使固定位置的 div 继承 flex 大小的父级的宽度？答案

【问题标题】：How to make fixed position div inherit width of flex sized parent?如何使固定位置的 div 继承 flex 大小的父级的宽度？
【发布时间】：2018-11-01 12:13:58
【问题描述】：

我有两个 flexbox 大小的 div 的设置，在其中一个我有一个设置为固定位置的标题。我将如何使它的宽度为父级的 100%？无论宽度如何，它都需要留在父级内部。谢谢。

.block1 {
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 35%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
  outline: solid red 1px;
}

.block2 {
  outline: solid red 1px;
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 65%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
}

.header {
  position: fixed;
  background-color: red;
  width: 100%;
  z-index: 2;
}

.container {
  width: 100%;
  height: 70%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin: 0px;
  outline: solid blue 1px;
}

<div class="container">

  <div class="block1">
    <div style="height:200px;">
      <div class="header">ff</div>
      <div style="height:500px;">
        ff
      </div>
    </div>
  </div>
  <div class="block2">
    <div style="height:200px;">
      ff

    </div>
  </div>
</div>

https://jsfiddle.net/nurqcq3e/

【问题讨论】：

您尝试做的事情不会奏效，您需要重新考虑您的页面结构。在设计样式时，固定位置元素会从其父上下文中删除。你需要一个外部容器来指定两个元素的宽度来实现这一点。

标签： html css flexbox css-position

【解决方案1】：

您需要为position: fixed 元素创建一个新的包含块。默认情况下，使用position: fixed 将该元素从文档流中拉出，并将其相对于视口建立的初始包含块（即<body>）定位。 MDN has a great overview of this property:

元素从正常的文档流中移除，并且在页面布局中没有为元素创建空间。它相对于视口建立的初始包含块定位，除非它的祖先之一的变换、透视或过滤器属性设置为非无（参见 CSS 变换规范），在这种情况下，祖先的行为为包含块。（请注意，浏览器与透视和过滤器的不一致会导致包含块的形成。）其最终位置由顶部、右侧、底部和左侧的值决定。

这个值总是创建一个新的堆叠上下文。在打印的文档中，元素被放置在每一页的相同位置。

我继续更新你的代码 sn-p 来说明：

.block1 {
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 35%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
  outline: solid red 1px;
  /* Necessary to become containing block for position: fixed child */
  transform: translate3d(0, 0, 0);
}

.block2 {
  outline: solid red 1px;
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 65%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
}

.header {
  position: fixed;
  background-color: red;
  width: 100%;
  z-index: 2;
}

.container {
  width: 100%;
  height: 70%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin: 0px;
  outline: solid blue 1px;
}

<div class="container">

  <div class="block1">
    <div style="height:200px;">
      <div class="header">ff</div>
      <div style="height:500px;">
        ff
      </div>
    </div>
  </div>
  <div class="block2">
    <div style="height:200px;">
      ff

    </div>
  </div>
</div>

【讨论】：

我知道已经 2 年了，但我尝试了您的解决方案，并且使用 transform: translate3d(0, 0, 0);，该块不再“固定”并在我滚动时移动......

【解决方案2】：

尝试将“标题”类的位置从“相对”更改为“绝对”。如果这没有帮助，你能提供一些模型吗？

【讨论】：

你能解释一下吗？

【解决方案3】：

肮脏的工作量

它基于固定 div 包含扩展其宽度的文本的情况。

如果你像下面这样用长文本添加到 .header div，它应该可以完成这项工作。

<div style="height: 0; overflow: hidden">
  Lorem ipsum dolor sit amet, ...
</div>

https://jsfiddle.net/6pwa7vxb/1/

【讨论】：