Question

我在建立网站时遇到了一个问题;这是一些项目离开屏幕。

以下是一个演示此问题的简单代码。在此，ID为div的{{1}}是消失的元素：

name-h

html, body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#name-h {
  font-size: 34px;
  margin-bottom: 450px;
}

这个问题的原因是什么？
我该如何解决？

编辑1

原来我在原问题中提供了一些错误的结论，所以我编辑了这个问题以删除它们。
-

编辑2（重要说明）

我所知道的是 <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="container"> <div id="name-h"> <p id="first-name">FirstNmae</p> <p id="last-name">LastName</p> </div> <div id="links"> <p class="link"><a href="">Resume</a></p> <p class="link"><a href="">Portfolio</a></p> <p class="link"><a href="">Blog</a></p> </div> </div> </body>增加高度以包含其元素，当其高度变得比屏幕更强时，滚动条出现，对吗？ 为什么不发生这种情况在我的情况下？为什么我要将html分配给height: 100%，html和body？
-

编辑3（Flexbox的原因是什么？）

强大的文字我认为flexbox可能是问题的原因：如果我们只从上面的代码中删除 #container，那么每件事都会按预期工作。我认为flexbox可能表现得像绝对定位元素，导致其项目离开屏幕。你怎么看？
-

编辑4

以下是虚拟文本案例的演示：link。请注意，实际文本以“Lorem ipsum dolor sit amet，consectetuer adipiscing elit”开头，而显示的文本由于问题而以其他内容开头。
-

编辑5

我正在使用display: flex;和html, body { height: 100%; width: 100%}来将flex的内容相对于整个视口居中，而不仅仅是flex本身。

Answer 1

您已在此处height:100%;声明了容器的高度（也是一个弹性箱），并为您的内部div margin-bottom:450px;

提供了#name-h

这可能导致问题。尝试使用height:auto;

更改容器的高度

希望这有帮助。

Answer 2

Flex-wrap 属性可以解决此问题。像这样使用它：

flex-wrap: wrap

Answer 3

我会尝试设置flex-flow：column wrap;在容器中。这或者给容器一个宽度。我喜欢弹性盒子，但有时和任何关系一样，它偶尔会让你疯狂

Answer 4

在div #container 周围添加包装div可防止商品退出浏览器窗口。但是，#container项仍未相对于视口居中。

以下是修改后的代码：

html,
body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#name-h {
  font-size: 34px;
  margin-bottom: 450px;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <div> <!--The only new div-->
    <div id="container">
      <div id="name-h">
        <p id="first-name">FirstNmae</p>
        <p id="last-name">LastName</p>
      </div>

      <div id="links">
        <p class="link"><a href="">Resume</a></p>
        <p class="link"><a href="">Portfolio</a></p>
        <p class="link"><a href="">Blog</a></p>
      </div>
    </div>
  </div>
</body>

Answer 5

您无需在height: 100%;或html中指定 body。宽度默认为100％，高度根据内部的内容而变化。

您可以删除html, body { height: 100%; width: 100%}，更具体地说html{ height: 100%;}来解决您的问题。

您不应该使用css设置html视口尺寸，因为它可能会破坏您的代码。最好为div标记设置样式，而不是html标记。这是link。

Flexbox项目离开浏览器窗口

编辑1

编辑2（重要说明）

编辑3（Flexbox的原因是什么？）

编辑4

编辑5

5 个答案: