I'm using a radial gradient as the background on my webpage, like so:
background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));
It works, but when the content does not fill the whole page the gradient is cut off. How can I make the <body> element fill the entire page, always?
html, body {
margin: 0;
height: 100%;
}
On our site we have pages where the content is static, and pages where it is loaded in with AJAX. On one page (a search page), there were cases when the AJAX results would more than fill the page, and cases where it would return no results. In order for the background image to fill the page in all cases we had to apply the following CSS:
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
height for the html and min-height for the body.
As none of the other answers worked for me, I decided to post this as an answer for others looking for a solution who also found the same problem. Both the html and body needed to be set with min-height or the gradient would not fill the body height.
I found Stephen P's comment to provide the correct answer to this.
html {
/* To make use of full height of page*/
min-height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
}
When I have the html (or the html and body) height set to 100%,
html {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
}
I had to apply 100% to both html and body.
The goal is to make the <body> element take up the available height of the screen.
If you don't expect your content to take up more than the height of the screen, or you plan to make an inner scrollable element, set
body {
height: 100vh;
}
otherwise, you want <body> to become scrollable when there is more content than the screen can hold, so set
body {
min-height: 100vh;
}
this alone achieves the goal, albeit with a possible, and probably desirable, refinement.
Removing the margin of <body>.
body {
margin: 0;
}
there are two main reasons for doing so.
<body> reaches the edge of the window.
<body> no longer has a scroll bar from the get-go.
P.S. if you want the background to be a radial gradient with its center in the center of the screen and not in the bottom right corner as with your example, consider using something like
body {
min-height: 100vh;
margin: 0;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>test</title>
</head>
<body>
</body>
</html>
Try using viewport (vh, vm) units of measure at the body level
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; }
Use vh units for horizontal margins, paddings, and borders on the body and subtract them from the min-height value.
I've had bizarre results using vh,vm units on elements within the body, especially when re-sizing.
I think the largely correct way, is to set css to this:
html
{
overflow: hidden;
}
body
{
margin: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
I tried all the solutions above and I'm not discrediting any of them, but in my case, they didn't work.
For me, the problem was caused because the <header> tag had a margin-top of 5em and the <footer> had a margin-bottom of 5em. I removed them and instead put some padding (top and bottom, respectively). I'm not sure if replacing the margin was an ideal fix to the problem, but the point is that, if the first and last elements in your <body> has some margins, you might want to look into it and remove them.
My html and body tags had the following styles
body {
line-height: 1;
min-height: 100%;
position: relative; }
html {
min-height: 100%;
background-color: #3c3c3c; }
If you have a border or padding, then the solution
html, body {
margin: 0;
height: 100%;
}
body {
border: solid red 5px;
border-radius: 2em;
}
produces the imperfect rendering
To get it right in the presence of a border or padding
use instead
html, body {
margin: 0;
height: 100%;
}
body {
box-sizing: border-box;
border: solid red 5px;
border-radius: 2em;
}
as Martin pointed out, although overflow: hidden is not needed.
(2018 - tested with Chrome 69 and IE 11)
Related
I am new to css and I am finding some difficulty in setting my webpage to fit exactly the screen size but it doesn't fit and a scroll bar occurs. I have tried all the ways mentioned here But none of them works. My web page looks more or less like this. When i used
html{
height: 100vh;
}
body{
width: 100%;
height: 100vh;
background-color: #ffffff;
font-family: gothambook;
position: fixed;
top: 0;
bottom: 0;
}
The scroll bar didn't occur but the content went below the screen and was not visible
html {}
body {
height: 95vh;
}
vh stands for View Height and so 97vh is 97% the View/Browser's height.
https://css-tricks.com/fun-viewport-units/
For some reason 100vh makes it scroll a little.
height: 100vh is not good idea to give it full screen.
Try min-height: 100%
You can fix this problem by changing both height and width to 100%. In your code, you have written height as 100vh.
html,
body{
width: 100%;
height: 100vh;
}
after changing them both to 100% you might still be able to scroll but you can fix that by adding this:
overflow: hidden;
In general for fixing this type of problem for any project this setup I think will always work:
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
If you want to completely disable the scroll then you can replace your styles with only this
html {
overflow: hidden;
}
You're almost there. Target both html and body and set both their width and height to 100%.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: red;
}
If body's direct child has top and bottom margin, it is going to make it scroll. So, we need to take that into account.
This works well for me:
body {
height: calc(100vh - 4rem);
}
.content {
max-width: 98.57rem;
margin: 2rem auto;
box-shadow: -1px 0px 6px 0px rgba(0,0,0,0.75);
min-height: 100%;
}
<body>
<div class="content">
....
</div>
</body>
I have a page with a just a header:
<body>
<div class="page">
<h1>This is the header</h1>
</div>
</body>
CSS is:
.page {
height: 297mm;
background-color: #0094ff;
position: relative;
overflow: hidden;
}
h1 {
margin: 0;
padding: 0;
}
When I try to print the page, the preview generates 2 pages. I just want it as a single page. So, what should be the height for the page class?
I just want the content to be printed on an A4 size page. How can I do it?
Reset margin, padding, height of html, body elements
By zeroing out the margin and padding and setting the height to 100%, you'll achieve full page coverage (no more, no less).
html, body {
margin: 0;
padding: 0;
height: 100%;
}
Update:
There is no need to specify a height for a particular page size in your CSS if you set the container element height to 100%.
If the page has more content than can fit on one printed page and you want to clip it, apply height: 100% and overflow: hidden to your container element — .page in this case.
.page {
height: 100%;
background-color: #0094ff;
overflow: hidden;
}
If you want to apply padding to the .page element and maintain your single-page clipping, you will need to apply box-sizing: border-box.
.page {
box-sizing: border-box;
padding: 1em;
height: 100%;
background-color: #0094ff;
overflow: hidden;
}
I am pretty new to CSS and I did what I intended to do, which is to make my window width and height 100% for a div so it fills up my window. However, what I am confused about is that I had to add:
.myDiv{
height:100%;
width:100%;
overflow: hidden;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}
When I didn't add overflow: hidden;I got a little bit of whitespace above myDiv, which is the first div of my html. To avoid this, I came across overflow:hidden but the idea of overflow: hidden is that the content of the div should be clipped. However, in my case, the content of myDiv is expanded to cover the whitespace after adding overflow:hidden; Why is that so?
margin of body element is set to 8px that is why..
With vw and vh: (not fully supported) see can i use vieuwport units
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-color: green;
}
<div>MAGIC</div>
with % height is not affected on block elements:
Eumz width is 100% on block element no need to define it again
body {
margin: 0;
}
div {
background-color: green;
}
<div>MAGIC</div>
Edit: final
body {
margin: 0;
}
div {
min-height: 100vh;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}
<div>MAGIC</div>
All browsers have set padding or margin around the edge of the web page so as to not have text right next to the screen.
You also don't need to use the overflow: hidden property if you use vw and vh which specify to be 100% of the viewport height/width.
This needs to be reset in your CSS:
html,
body {
padding: 0;
margin: 0;
}
.myDiv {
height: 100vh;
width: 100vw;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}
<div class="myDiv"></div>
Viewport Units
Add * { margin : 0; } in the beginning.
Here is the snippet.
* {
margin : 0;
}
.myDiv {
position : absolute;
height: 100%;
width: 100%;
overflow: hidden;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC) repeat;
}
<div class='myDiv'></div>
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
What's the best approach to creating a div that will take the full width of the screen, no matter what resolution? I'm trying to add a 'top' bar and bottom 'footer' area with divs that have a black background and styled border that I'd create with a small image and repeat. For some reason my attempts are leading to small spaces on the top and sides of the div?
My markup is similar to:
<div id="top">
Top bar stuff
</div>
<div id="pagewrap">
All the page content
</div>
CSS
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
Usually this is the body tag having some paddings and/or margins. Try adding:
body {
padding: 0;
margin: 0;
}
If this works, you may want to consider using a normalization stylesheet that fixes this type of issue as well as many other related types of issues.
Extended answer...
The above answers the core issue folks landing here seem to have. But to expand a bit, try to directly answer the original question, and also providing some staple code that I use for things nowaydays:
Here's how I would create a full-width, but also full-height div inside a body in a cross-browser (but modern browser only) way:
document.getElementById("pagewrap").innerHTML = "All the page content<br>".repeat(100);
* {
box-sizing: border-box; /* not completely needed, yet useful */
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex; /* or css grid for more intricate layouts */
flex-direction: column;
}
#top {
background-color: LightCoral;
height: 150px;
border-bottom: 3px solid Crimson;
}
#pagewrap {
background-color: LightGreen;
flex-grow: 1; /* make it stretch to the bottom even if little content */
overflow-y: scroll; /* optional */
}
<div id="top">Top bar stuff</div>
<div id="pagewrap">All the page content</div>
Just use top:0; and left: 0; and you can also eliminate padding: 0. Don't use top: 0; for other div except top, use left: 0; for other div for eliminate the left space.
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
top: 0;
left: 0;
}
Ensure that body has padding and margin set to 0 in CSS.