htmlcssresponsive-designdocument-body

Body isn't taking cover of the whole screen

In my css:

body {
    background-color: black;
    color: white;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    /* animation: scroll 5s; */
}

After this code in the body tag, the body is still not taking up the whole screen in browser, in inspect it shows that it has 1536 * 417 dimension, even when my screen size is 1920*1080

I tried using 100vh height, but made it worse by messing up the posotion relative elements.

Solution

  • Do you have any UI frameworks or other CSS imported into your site that might be doing some funny stuff to it?

    Without knowing what your end goal is and why you want to cover the whole screen body { height: 100vh; } or this should work:

    html {
  height: 100%;
}
body {
  min-height: 100%;
}

    Also make sure you have zoomed your browser window too 100%. CTRL+0 on Windows.