大きな画面でCSSオーバーフローが表示されない

Question

div内にフォームがあります。 divは768pxです。このフォームには、開発環境に応じて2つの入力が表示されます。フォームはdivの内部にある必要がありますが、入力フィールドは開発に必要なだけなので768pxを超える余白が与えられてdivの外側に表示されます。プロダクションで使用される画面の解像度は768pxですので、入力フィールドは表示されません。私はhtmlとbodyタグにスクロールバーを削除するための宣言overflow: hiddenを与えました。ただし、画面が上から下に向かって表示されるのではなく、下から上に表示されます。入力フィールドが表示され、divの上部の一部がカットオフされます。私はボディ、div、フォームに768の高さとoverflow: hiddenを与えようとしましたが、私がそうすると、フィールドはdivの中央にプッシュアップされます。基本的に私が望むのは、フィールドが768pxの背の高いdivの真下に座っていることです。画面が768px以上の場合、私はそれが表示されないように入力を表示する必要があります。しかし、私はフィールドの機能を継続したいので、私はdisplay noneを使うことはできません。

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

Answer 1

あなたは上からフォーム768pxを置くために絶対位置を使用することができます。ここでは

は、セットアップがどのようです。次にbodyまたはhtmlの高さを768pxに設定する代わりに、100vhに設定します。これはブラウザウィンドウの高さを正確に意味します。したがって、誰かのブラウザのサイズが768px以下であれば、フォームは表示されません。もしそれが768以上なら、彼らはそうなるでしょう。誰もスクロールバーを見ることはできません。

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

 
.page { 
 
\t height: 768px; 
 
    
 
    /* just so you can see where the div is */ 
 
\t background: skyblue; 
 
} 
 

 
form { 
 
\t position: absolute; 
 
\t top: 768px; 
 
}

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