Question

我正在学习CSS中的绳索，并且在将flexbox与绝对子级和重叠的div结合使用时遇到问题。基于在线问题，我发现可能存在问题，只是没有找到解决正在遇到的问题的方法。

我之前问了一个问题，该解决方案运行良好：How to make one div always be at the bottom of the view and make top div resize based on bottom div?

基本上，顶部div（Div A）会填充视口的剩余空间，而底部div不会动态填充。

但是，我遇到了一个问题，因为我的divA包含需要重叠并且使用position：absolute的子元素。

在处理flex之前，这是我定义顶级div的方式：（请原谅命名和内容。为便于说明，我为它们起了假名。）

    #divA {
        width: 100vw;
        height: 70vh;
        position: relative;
    }

    #innerContainer {
        position: absolute;
        width: inherit;
        height: inherit;
    }

    #centeredIcon {
        width: 2em;
        height: 3em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1;
    }

元素类似于：

    <div id="divA">
        <div id="innerContainer"/>
        <img id="centeredIcon" src="..."/>
    </div>
    <div id="divB"> ... </div>

在尝试将Div A的外部容器转换为使用flex: 1 0 auto;并将divA和divB放入包装div中时，我的divA的innerContainer几乎消失了（大小为0）。

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

关于如何进行这项工作的任何建议？

Answer 1

绝对定位的元素innerContainer不能正确填充其容器divA的空间-可以使用100％并设置100％，而不是使用width: inherit和height: inherit top和left设为零。

（可选）我在flex-shrink: 0上添加了divB，以便在窗口高度较小时不会收缩-请参见下面的演示

body {
  margin: 0;
}
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#divA {
  position: relative;
  flex-grow: 1; /* occupy remaining space */
  background: lightblue;
}

#divB {
  flex-shrink: 0; /* do not shrink */
  background: lightgreen;
  /* center horizontally and place buttons vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
}

#innerContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#centeredIcon {
  width: 2em;
  height: 3em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 1;
}

<div class="wrapper">
  <div id="divA">
    <div id="innerContainer"></div>
    <img id="centeredIcon" src="https://via.placeholder.com/200" />
  </div>
  <div id="divB">
    <button>button 1</button>
    <button>button 2</button>
  </div>
</div>

将Flexbox与绝对位置子项一起使用？

1 个答案: