Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I want to change the color of the body, but it takes up the entire screen

I’m creating a web page about a weather app, but I have a problem with the background-color of the body.

I gave the bodysuit the background color #191a38. Inside the body I have a main with the information of the app

img 1
The space below is left blank, it is assumed that with the background-color, it takes the entire body and applies the color to it, just as it is in this image

img 2
Can someone tell me why in the last image the entire color changes and in the first image it doesn’t?

I am creating this project with react, next and tailwindcss.

I tried to change the body size, setting a height of 100vh, but this happens when scrolling

img 3

What I expect is that no matter the screen size, the background color should fill the entire screen

Tags:

2

Answers


  1. 0

    The width/height of the <body> is not necessarily the same as the user’s screen width/height, because the <body> is limited to the displayed content of the page. If the page is straighter/shorter than the screen, then background-color will only fill the content. To ensure that your background-color fills all the available screen space, you have to stretch the <body> to fill the screen:

    body {
    width: 100%;
    height: 100%;
}

    But… an element set to 100% means it will only fill 100% of the parent, and <body> has a parent: <html>. So you’ll have to set that one too:

    html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-color: #191a38;
}

    That should do the trick.

    Login or Signup to reply.
  2. 0

    I think, the issue lies in setting height: 100vh for the body element, which restricts the body height to 100% of the viewport height. This results in the background not covering the entire page when scrolling.

    You should try min-height: 100vh instead of height: 100vh.

    CSS

    body {
 background-color: #191a38;
 min-height: 100vh;
 margin: 0;
 padding: 0;
}

    This CSS ensures that the body will have a minimum height of the viewport height but will also expand as needed to cover all the content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search