Amm*_*sfi 5 html css margin viewport
建立网站时遇到问题；是有些项目不在屏幕上。
以下是演示该问题的简单代码。在这里，divID为的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;
}<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和#container？
--
我认为Flexbox可能是问题的原因：如果仅从上面的代码中删除 display: flex;，一切都会按预期进行。我认为flexbox的行为可能像是绝对定位的元素，这会导致其项目超出屏幕。你怎么看？
--
这是带有伪文本的示例：link。请注意，实际文本以“ Lorem ipsum dolor sit amet，consectetuer adipiscing elit”开头，而由于问题，显示的文本以其他内容开头。
--
我正在使用html, body { height: 100%; width: 100%}，#container {height: 100%;}以便将flex的内容相对于整个视口居中，而不仅是flex本身。
你已经声明了容器的高度，它也是一个弹性盒子height:100%;，并给了margin-bottom:450px;你的内部 div#name-h
这可能是导致问题的原因。尝试改变容器的高度height:auto;
希望这有帮助。