This question already has answers here:
React force background color full height
(3 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
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.
You just need to add height:100vh.So that it will cover your whole screen.
Try with this
* {
box-sizing: border-box;
}
body {
margin: 0;
}
div {
background: red;
color: white;
min-height: 100vh;
padding: 10px;
}
<div>
Test
</div>
You can use:
height: 100% !important;
Related
This question already has answers here:
Why does styling the background of the body element affect the entire screen?
(7 answers)
Giving background-color to body applying whole page. Why?
(6 answers)
Closed 4 months ago.
When I set background-color, there are no white spaces as expected. My browser is chrome and it was a brand-new code, no other styles where applied in the CSS. Same thing happens with or without more components present in the HTML file. Added a div to try it out and same result.
body {
background-color: aquamarine;
}
In my experience, if you add any component or element inside , you would be offered a margin of 8px.
<body>
<div style="background-color:red;height: fit-content;"></div>
</body>
Did you set both margin and padding to 0 in css?
You can style the body's margin to 8px if you would like to have the space without color or you can style the body's padding to 8px if you would like to get space color same as body background color.
I would check the height and width of the component you are trying to see. Make sure neither of them are 0.
UPDATE: I think I understand your question better now. If you want to see the 8px margin on the body set by default in Chrome, run this code snippet.
html {
height: 100%;
}
body {
height: 100%;
}
.example {
background-color: aquamarine;
height: 100%;
}
<html>
<body>
<div class='example'/>
</body>
</html>
This question already has answers here:
Why does styling the background of the body element affect the entire screen?
(7 answers)
Giving background-color to body applying whole page. Why?
(6 answers)
Closed 1 year ago.
Can anyone explain why the background color is filling the entire screen even when body is having zero height?
.bgcolor {
background-color : red;
height:0;
}
<body class="bgcolor"></body>
body tag is always taking the whole document's body, so if you want to give background with limited height then put one DIV inside the body tag and then give specific height, then it will work fine.
so for the solution, please give background color to HTML div as well.
html {
background-color: #ffffff;
}
This question already has answers here:
How to use css media queries correctly for responsive design
(2 answers)
Closed 6 years ago.
I've seen on a few websites in the past where a background image on a big DIV (say 100vh and 100vw) will stretch as the browser grows, but when a certain lower threshold is met (e.g. 800px), the background image doesn't stay at 100%, but starts clipping the background image instead.
I can't find those pages anymore now that I need to do it myself. CSS solution?
You can still use 100vh and 100vw something like below -
body {
margin:0; /* reset any browser-default margins */
height:100vh;
width:100vw;
}
img {
height: 100vh;
width: 100vw;
}
<body>
<img src="https://www.gstatic.com/webp/gallery3/1.png" />
</body>
Hope this will help you in some way (y).
This question already has an answer here:
Maintain aspect ratio of a div according to height [duplicate]
(1 answer)
Closed 8 years ago.
Is it possible to make a square div with css based on its height in pixels?
This question is similar to this one (marked as duplicate), but in this case I want height to be set in pixel or any unit.
When based on width, there is a simple solution :
.mydiv {
height: 0;
padding-bottom: 100%;
}
But here 'height follows width'. I'm looking for solution where 'width follows height'. So if I would set height to 300px, width would follow it.
For now I'm doing it using javascript, updating on window resize. But I would like to find a CSS solution, thats why I'm not looking for a javascript solution
Here is a playground
You could use the new viewport size units
JSfiddle
CSS
html,body {
height: 100%;
margin: 0;
}
div {
background: red;
height: 100vh;
max-width:100vh;
box-sizing: border-box;
}
Support is effectively IE9 and up
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 8 years ago.
So I have this very basic question that I was wondering about. I just set a background through css with
body {
width: 960px;
margin: 0 auto;
background-image: url("../img/background2.jpg");
}
Why is the image showing up at both sides as well and not only in the center 960 pixels? If I put my background image in a navigation class selector, it does work:
.container {
background: #099;
}
Why is that? Shouldn't the body image be restricted by the width that I set?
Here is my code: http://jsfiddle.net/nB22j/
Also, is there any use for the .container selector if I can just put everything in body {} ? (In this case I do want the background to fill the full browser so I can put my background in body {} but I'm just wondering...) I'm not sure anymore why I added the container div in the first place. Any reason for it to exist?
Because, if you set no background to HTML , body's background is applied to HTML too.
Just add this : DEMO
html {
background:#fff;/* or any color/image/gradient you want */
}
and your background for body will only be drawn where body stands.
See W3C for more infos.