在较小的设备上重叠 flexbox 列中的 div答案

【问题标题】：Overlapping divs in flexbox column on smaller devices在较小的设备上重叠 flexbox 列中的 div
【发布时间】：2020-11-28 20:46:22
【问题描述】：

我正在尝试为移动响应式网络应用程序设计一个侧边栏组件。目标是让侧边栏响应不同的屏幕尺寸。然而，随着屏幕尺寸变小，底部 div 将与顶部 div 重叠，顶部 div 具有固定的高度。您可以在 codepen 上看到问题 here 的一般化示例，并在此图片中进行了描述。

这是来自 codepen 的 html/css 的简化 sn-p

.container {
  width: 10%;
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
}

.div1 {
  height: 250px;
  position: absolute;
  top: 0;
 }

.div2 {
  height: 75px;
  position: absolute;
  bottom: 0;
 }

<div class='main'>
  <div class='container'> 
    <div class='div1'> 
      content div1
    </div>
    <div class='div2'> 
      content div2
    </div>
  </div>
</div>

当 (div2) 开始侵占 div1 时，您必须提供哪些属性才能停止重叠？期望的结果是 div2 将始终垂直对齐，并且与 continue 重叠通过屏幕当前高度，您只需向下滚动即可查看 div2 的内容。

【问题讨论】：

两个 div 碰撞会发生什么？

标签： html css mobile flexbox responsive-design

【解决方案1】：

这里是一个，将height度量从px替换为%这将导致div根据其容器的高度采用height以下是一个示例

.container {
  width: 10%;
  border: 1px solid black;
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
}

.div1 {
  height: 40%;
  position: absolute;
  top: 0;
  background-color: lightblue;
  border: 1px dotted black;
}

.div2 {
  height: 25%;
  position: absolute;
  bottom: 0;
  background-color: lightyellow;
  border: 1px dotted black;
}

<div class='main'>
  <div class='container'>
    <div class='div1'>
      content
    </div>
    <div class='div2'>
      content
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

将div2的css属性改成这样：

.div2 {
  max-height: 75px;
  height: 20%;
  position: absolute;
  bottom: 0;
  background-color: lightyellow;
  border: 1px dotted black;
 }

div2 的最大高度为 75（因此，在较大的屏幕上，它将为 75px，正如您所期望的那样），但是，当您使屏幕变短时，它会开始减小。

您还可以为较小的屏幕创建媒体查询。

【讨论】：