gpt4 book ai didi

为大屏幕隐藏 CSS 溢出

转载 作者:行者123 更新时间:2023-11-28 05:01:11 25 4
gpt4 key购买 nike

我在 div 中有一个表单。 div 的高度为 768px。该表单有 2 个输入,根据开发环境显示。表单必须在 div 内部,但输入字段仅在开发时需要,因此它的边距超过 768px,因此它将显示在 div 外部。生产中使用的屏幕分辨率为 768 像素高,因此输入字段不应显示在那里。我已经给 html 和 body 标签声明 overflow: hidden 以删除滚动条。但是,屏幕不是从上到下显示,而是从下到上显示。因此显示了输入字段并且 div 顶部的一部分被截断了。我试过为正文、div、表单设置 768 高度和 overflow: hidden 但是当我这样做时,该字段被推到 div 的中间。基本上我想要的是位于 768px 高 div 正下方的字段。如果屏幕超过 768px 高,我希望输入显示,否则我不希望它显示。但是我确实希望字段功能继续,所以我不能使用 display none。

设置是这样的:

<div>
<form>
<input></input>
<input></input>
</form>
</div>

最佳答案

您可以使用绝对定位将表单放在距顶部 768px 的位置。然后,不要将 body 或 html 高度设置为 768px,而是将其设置为 100vh - 这恰好意味着浏览器窗口的高度。因此,如果某人的浏览器高度为 768px 或更低,他们将看不到该表单。如果它超过 768,他们会的。没有人会看到任何滚动条。

html, body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}

.page {
height: 768px;

/* just so you can see where the div is */
background: skyblue;
}

form {
position: absolute;
top: 768px;
}
<div class="page">
<form>
<input type="text" placeholder="Field 1" />
<input type="text" placeholder="Field 2" />
</form>
</div>

关于为大屏幕隐藏 CSS 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40097908/

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