Question

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

以下是设置的方式：

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

Answer 1

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

＆＃13;

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;
}

＆＃13;

<div class="page">
  <form>
    <input type="text" placeholder="Field 1" />
    <input type="text" placeholder="Field 2" />
   </form>
 </div>

＆＃13;

CSS溢出隐藏为更大的屏幕

1 个答案: