The goal is to implement the site on which the page will be placed in the height of the screen without scrolling, i.e. look like an application, if I set the height of the screen of my laptop in pixels, then everything is fine, but what about monitors with a higher resolution?

  • Did any answer fit you? If so, mark it as accepted. If not, specify in the comments what you need. - Vadim Ovchinnikov

4 answers 4

Option 1 ( % ):

 html,body,div { width: 100%; height: 100%; margin: 0; } div {background: #ccc;} 
 <div></div>

Option 2 ( vh ):

 div { height: 100vh; background: #ccc; } html, body {margin: 0;} 
 <div></div> 

     * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { padding: 1em; background: antiquewhite; outline: 1px dotted red; outline-offset: -1em; }

    • The fact is that on the right side there is not just a background but an image, and for it to appear, the block should have a height, if you set it a height in pixels, then with a high resolution the border still appears and then the white screen - vovaxxx
    • @vovaxxx, ask in percentage. - Qwertiy ♦

    Just set the body height: 100vh; property height: 100vh; . vh is the viewport height, that is, the value relative to the browser window.

     body { margin: 0; height: 100vh; } 
       html,body{ height:100%; } .your-div-class{ height:100%; }

      http://codepen.io/DavidKern/pen/avgbRM

      • Thank you, and thanks for the link, there is something to learn) - vovaxxx