代码之家 › 专栏 › 技术社区 › clarkk

覆盖flexbox和溢流

css html

clarkk · 技术社区 · 2 年前

在结账页面上,我在网站顶部做了一个覆盖,其中禁用了在主体上滚动,但在覆盖上启用了溢出。

但是,如果视口较小,则会剪裁覆盖上的内容。

如何避免这种情况?

我试着添加 overflow:auto 到覆盖层,但不起作用:

body {
  overflow: hidden;
}

#overlay.active {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: auto;
  background: yellow;
}

<div id="overlay" class="active">
  <div style="height:300px; background:white; padding:20px">
    content
  </div>
</div>

1 回复 | 直到 2 年前

John Li 2 年前

更新

似乎添加 margin: auto 关于孩子 div 内容所在的位置可以解决此问题:

#overlay > div { margin: auto; }

使用 safe 对于 align-items 这将是一个很好的解决方案,但目前仅适用于Firefox:

align-items: safe center;

实例

body {
  overflow: hidden;
}

/* ð Added on the child div */
#overlay > div {
  margin: auto;
}

#overlay.active {
  position: fixed;
  /* ð Can use shorthand (Optional: not supported by older browsers and IE) */
  inset: 0;
  display: flex;
  justify-content: center;
  /* ð Safe is only working on Firefox as of now  */
  align-items: safe center;
  padding: 20px;
  background: #fff;
  overflow: auto;
  background: pink;
}

<div id="overlay" class="active">
  <div style="height:300px; background:white; padding:20px">
    content
  </div>
</div>

Jenny 2 年前

删除 align-items:center; 您在#overlay.active上拥有的,内容将按预期滚动。#overlay.active只有一个子项,因此对齐项(定义弹性项如何沿当前行的横轴排列)实际上没有任何视觉效果

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前