gpt4 book ai didi

html - Flexbox 元素离开浏览器窗口

转载 作者:太空狗 更新时间:2023-10-29 16:34:27 27 4
gpt4 key购买 nike

我在构建网站时遇到了一个问题;就是有些元素超出了屏幕。

以下是演示问题的简单代码。在这里,id 为 name-hdiv 是消失的元素:

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% 分配给 htmlbody#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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com