Question

我有一个设置有两个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/

Answer 1

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

Answer 2

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

该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。它相对于视口建立的初始包含块定位，除非其中一个祖先的transform，perspective或filter属性设置为none以外的其他属性（请参阅CSS Transforms Spec），在这种情况下，祖先的行为与包含块。（请注意，浏览器与透视和滤镜的不一致有助于包含块的形成。）其最终位置由顶部，右侧，底部和左侧的值决定。

此值始终会创建新的堆叠上下文。在打印文档中，元素放置在每个页面上的相同位置。

我继续更新您的代码段以说明：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

肮脏的工作量

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

如果您像下面那样在.header div中添加长文本，则应该可以完成这项工作。

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

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

如何使固定位置div继承flex flex parent的宽度？

3 个答案:

肮脏的工作量