How to extend div to the entire page?

Question

I am trying to set background color to the pages in my React app. I want to set a background color extending to the full page length and width but I cannot do that, for forms or tables extending beyond, I set height/width or min-height/min-width to 100% and I get the result for larger contents but for smaller contents,I get this:

I want to have the entire page of blue color.

This is my css file

.body
{
   margin:0px 0px 0px 0px;
   background-color:#4086ef;
   padding:10px;
   height:100%;
   width:100%;
}

If I set height to 100vh, I get the undesired result but with contents going beyond the page.

(Content rendering is dynamic so I don't know when the content will go beyond and when not).

EDIT: The table doesn't squeeze along when I compress the window and neither does the overflowing part follow the background color but the height follows the background color even when scrolled.

Are you adding the style to `` . If so you have to remove the . from .body in css — joohong89, Jun 12 '19 at 06:22
the width does not work, if I open the Dev Tools, and scroll to the right, background is white, I have tried setting width and min-width:100vh; — Abdul Ahad, Jun 12 '19 at 06:31
If you'd like to set a background for all your pages in react why not just set the background color on the body itself? — Ovidiu G, Jun 12 '19 at 07:56
actually there are two separate workflows in the same app, and one workflow has to have a different background color, the white is the color in the body of app.js — Abdul Ahad, Jun 12 '19 at 08:25
@LaljiTadhani The width doesn't work at all, The content inside is a table, and even when I try to alter the margin, nothing happens — Abdul Ahad, Jun 12 '19 at 09:01

score 5 · Answer 1 · answered Jun 12 '19 at 06:22

5

You just need to add height:100vh.So that it will cover your whole screen.

answered Jun 12 '19 at 06:22

Arjun

1,294
13
24

Worked but with min-height:100vh, though adding 100vh extends the page length and gives a scrollign option when not needed. Also, what is the difference between % and vh? I know vh gives value relative to the browser height. – Abdul Ahad Jun 12 '19 at 06:25
100vh means 100% viewport height where 100% means parent's element height.Usually both works same in body tag because its our parent element.Also if 100vh gives you scrollbar then you can set overflow:hidden property in body tag.But normally 100vh wont give scrollbar.There might be other reasons of the scrollbar. – Arjun Jun 12 '19 at 06:30

score 0 · Answer 2 · answered Jun 12 '19 at 06:36

0

Try with this

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

div {
    background: red;
    color: white;
    min-height: 100vh;
    padding: 10px;
}

<div>
    Test
</div>

answered Jun 12 '19 at 06:36

Lalji Tadhani

14,041
3
23
40

Actually it is a react app and I have to assign each div some id or class, so I don't think * would work and including this in the body doesn't work either. – Abdul Ahad Jun 12 '19 at 09:55
this is a common css – Lalji Tadhani Jun 12 '19 at 10:00
I am using modular approach, as you can see I have used **.body** instead of body, anyway I tried and it did not work. – Abdul Ahad Jun 12 '19 at 10:01

score -1 · Answer 3 · answered Jun 12 '19 at 06:30

-1

You can use: height: 100% !important;

answered Jun 12 '19 at 06:30

Le Quang

515
4
10

How to extend div to the entire page?

3 Answers3