我在构建网站时遇到了一个问题；就是有些元素超出了屏幕。
以下是演示问题的简单代码。在这里，id 为 name-h 的 div 是消失的元素:
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 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>这个问题的原因是什么？
我该如何解决？
编辑1
原来我在原题中提供了一些错误的结论，所以我编辑了问题以将其删除。
-
编辑 2(重要说明)
我所知道的是 html 增加高度 以包含它的元素，并且当它的高度变得大于 屏幕时， 出现滚动条，对吧？ 为什么这在我的案例中没有发生？为什么我还要将 height: 100% 分配给 html、body 和 #container？
-
编辑 3(是 flexbox 的原因吗？)
strong text 我认为 flexbox 可能是问题的原因:如果我们从上面的代码中删除 display: flex;，一切都会按预期工作。我在想 flexbox 可能表现得像一个 absolutely 定位的元素，这会导致它的元素超出屏幕。你怎么看？
-
编辑4
这是一个带有虚拟文本的案例的演示:link .请注意，实际文本以“Lorem ipsum dolor sit amet, consectetuer adipiscing elit”开头，而显示的文本由于问题而以其他内容开头。
-
编辑5
我正在使用 html, body { height: 100%; width: 100%} 和 #container {height: 100%;} 以使 flex 的内容相对于整个视口(viewport)居中，而不仅仅是相对于 flex 本身。
最佳答案
你在这里声明了容器的高度，它也是一个 flexbox height:100%;并给出 margin-bottom:450px;到你的内部 div #name-h
这可能是导致问题的原因。尝试使用 height:auto; 更改容器的高度
希望对您有所帮助。
关于html - Flexbox 元素离开浏览器窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46997259/