cssウィンドウを拡大したときの画面の高さを入力100％

Question

ウェブサイトを100％拡大したときの高さをどのようにして埋めますか？ズームアウトすると、要素が画面を満たし続けることは望ましくありません。より明確にするために、ユーザがウェブサイトに入り、ウェブサイトがデフォルト100％でズームされると、画面全体が色で塗りつぶされるべきである。しかし、ユーザーがスクロールしたりズームしたりすると、その高さが動的に変更されるべきではありません。

のコメントから、私はより良い結果を得るために、コードを編集して、今は要素の周囲に隙間がある：

header.mainHeader { 
    background-color: #282828; 
    width: 100%; 
    height: 100vh; 
    box-sizing: border-box; 
} 

Answer 1

まず、あなたは.mainHeaderクラスのposition: fixedを設定しています。これにより、ズームレベルやスクロール位置に関係なく、常にビューポートの同じ位置に要素が表示されます。

これを削除します。position: fixedと対応するtopとleftのプロパティ。

---

あなたは現在、その親要素の100%にheightを設定しているので、それはいつもと同じくらい大きいでしょう。同様にwidthとvwのために -

を使用すると、ビューポートの高さ（ vh）の割合に相当 vhユニットを、使用することができ、ビューポートの（可視ページ領域）の高さを利用して高さを設定します。

ので、ビューポートの高さの100％に要素の高さを設定するには、単に行うことができます。

height: 100vh; 

EDITから注：vhユニットはによってサポートされていません。すべてブラウザ（私はいくつかを見つけました、私を信頼してください）。だから私は互換性を防ぐために、vhよりも上のフォールバック値を設定することをお勧めします。たとえば：

height: 500px; // fallback value if browser doesn't support vh 
height: 100vh; // this value overrides the above one, if the browser supports vh 

---

あなたは、あなたが要素の周りに空白を見ている場合は、bodyまたは他の要素からpaddingおよび/またはmarginを削除する必要があります。適切な効果を得るために遊びましょう。

body { 
    padding: 0; 
    margin: 0; 
    ... other properties 
} 

---

この動作のJSFiddleを見つけてください：https://jsfiddle.net/s49p6Laj/

サンプルコード：

HTML

<div class="header"> 
    I fill the viewport! 
</div> 
<div class="other-stuff"> 
    // All your other content here... 
</div> 

たとえば

一見

CSS

// Set the body's margin and padding to 0 
body { 
    margin: 0; 
    padding: 0; 
} 

// Make the container fill the viewport 
.header{ 
    width: 100%; 
    height: 100vh;