时间戳

首页 > 解决方案 > 即使溢出设置为滚动，元素也被推到页面上方

html - 即使溢出设置为滚动，元素也被推到页面上方

问题描述

我的一个项目有问题。我将容器设置为 100vh 和 100vw，并将溢出设置为“自动”。然而，即使有这些高度和宽度属性，以及溢出，似乎元素仍然被推出 div，我不知道为什么。例如，在这个 div 中，我有一个 h1 和一个图像。我在图像上方显示了 h1；当我的屏幕高度太小时，我希望用户能够滚动。但是，即使设置了溢出，h1 也会完全推到页面上方，因此无法看到，也无法向上滚动，只能滚动图像及其下方的所有内容。

我的 JSX：

<div id="SingleProjectContainer">
        <h1>{name}</h1>
            {images.map((image, idx) => (
              <div key={idx}>
                <img src={image} alt="Project Picture" />
              </div>
            ))}
      </div>

和我的 CSS：

#SingleProjectContainer {
  top: 0;
  padding: 10px;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  flex-direction: column;
  overflow: auto;
  flex: auto;
}

#SingleProjectContainer h1 {
  font-size: 3em;
  margin: 10px;
  color: white;
}

我尝试了许多头寸和保证金设置的组合，但似乎没有任何效果。我不确定我是否缺少另一个 css 属性。任何帮助将不胜感激！

标签： htmlcssreactjs

解决方案

评论回答：

这是一个flexbox 问题。删除justify-content并改为在孩子身上align items使用margin: auto。

推荐阅读