This code working fine
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html {
width: 100%;
height: 100%;
background-color: red;
margin: 0px;
padding: 0px;
}
body {
background-color: chartreuse;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
but then this code doe not work when i try to add margin 5% to each side of body....
why there is vertical scrolling bar....
height 90% + 2 * 5% margin = 100% height
but there is scrolling bar....
i think when body height is 100% then is not be any scrolling bar present
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html {
width: 100%;
height: 100%;
background-color: red;
margin: 0px;
padding: 0px;
}
body {
background-color: chartreuse;
width: 90%;
height: 90%;
padding: 0px;
margin: 5%;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
Try this. Maybe it will point you in the right direction
<style>
html, body {
height: 100%; /* keep these full height to avoid push or pull */
margin: 0; /* remove default margin on body */
}
body {
background-color: red; /* your background color */
}
#page {
width: 90vw; /* use 90/100 of view width */
height: 90vh; /* use 90/100 of view height */
/* top margin 5/100 of view height + auto margin on left/right */
margin: 5vh auto 0 auto;
background-color: chartreuse; /* your background color */
}
</style>
<body>
<div id="page">
<!-- here your content in the #page container -->
</div>
</body
In order to achieve the first case you need to increase the padding rather than the margin because margin is used for creating space around elements ,outside of any defined borders and here space is created around body tag thus,pushing the body element.Now to fill the green background over red you need to use padding which creates space inside the element's defined borders around the content thereby increasing height and width of the element.
Padding properties can have following values:
Length in cm, px, pt, etc.
Width % of the element.
Now when you assigned padding:5% that will be equal to 5% of the width and height of body element that is 5% of 90% of html tag's width and height and this is how your math went wrong .I tried some values and got what you needed.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin:0px;
padding:0px;
}
html {
width:100%;
height:100%;
background-color: red;
}
body {
background-color: chartreuse;
width:90%;
height:90%;
padding-right:5%;
padding-left:5%;
padding-top:2.3%;
padding-bottom:2.3%;
}
</style>
<title>Document</title>
</head>
<body >
</body>
</html>
Related
p element without margin:
body {
width: 100vw;
height: 100vh;
margin: 0;
}
p {
margin: 0 0;
}
<!DOCTYPE html>
<html>
<body>
<p>p</p>
</body>
</html>
p element with margin:
body {
width: 100vw;
height: 100vh;
margin: 0;
}
p {
margin: 1px 0;
}
<!DOCTYPE html>
<html>
<body>
<p>p</p>
</body>
</html>
Why does setting p tag's vertical margin to 1px make scrollbars appear?
Margin collapse. The p's top margin collapses with the body's margin, making the body's margin box height 100vh + 1px, which overflows the viewport, requiring the scrollbars.
If you stop the margin from collapsing by setting the body's display to flow-root, the scrollbars disappear.
body {
width: 100vw;
height: 100vh;
margin: 0;
display:flow-root;
}
p {
margin: 1px 0;
}
<!DOCTYPE html>
<html>
<body>
<p>p</p>
</body>
</html>
p's are block-level which generate line breaks both before and after the element when in the normal flow. This allows for content to flow above or beneath instead of adjacent.
When you add margin to this it creates a collapsed margin.
When you use inline-block the element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
So when you set p to display: inline-block; the scrollbar is removed.
body {
width: 100vw;
height: 100vh;
margin: 0;
}
p {
margin: 1px 0;
display: inline-block;
}
<!DOCTYPE html>
<html>
<body>
<p>p</p>
</body>
</html>
With this simple HTML/CSS template below, I expected BODY to be contained within HTML element. Why is it not? I separated the css for HTML and BODY to give different colors.
https://jsfiddle.net/jwinnd/w95ngLqc/3/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style>
html {
width: 100%;
height: 100%;
border: solid 30px red;
}
body {
width: 100%;
height: 100%;
border: solid 30px blue;
}
</style>
</head>
<body>
<script>
</script>
</body>
</html>
This is what you want. Don't overthink it. The box-sizing property is the most important in this scenario. The box-sizing will measure the element's width and height with the border included.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>demo</title>
<style>
html {
border: solid 30px red;
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
border: solid 30px blue;
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
</style>
</head>
<body>
<script>
</script>
</body>
</html>
Your Question:
In short; you're asking why the body element is not directly on top of the html parent as you would expect.
Explanation:
The fact is, IT IS, but the way that the CSS is set out, is that some CSS rules and some default styling factors offset this direct layering.
In this case, the HTML and the body 'boxes' are only by default measured by the system in terms of it's "content area" rather than it's whole "margin" + "border" + "content" area.
Read about CSS box-sizing.
You have a border on both, so the child element is offset against the border, but the child element has also been told to be 100% width, so it must overflow the parent because the true total size of the child element is "border" (30px x 2) + "padding" (0px) + "content" (100%)
As well as this, the <body> element has a default margin value of 8px (0.5rem standard font size) on all edges so this as well is not accounted for by the sizing system because the margin (like the border) is not in the "content area" and so causes a further offset.
However, the child element is forced to being 100% of its parent so it has to "overflow" at the far end of the parent (<html>) box; causing your borders to overlap.
From the above you can see your body element actually has a TOTAL width of:
margin: 16px
border: 60px
content: 100%
So the body is 100% + 76px of the parent element's size.
CSS can't not show any part of the display, so it is forced to overflow the parent to keep everything viewable (You can change this with: overflow:hidden;)
Further to the above, the <body> element overflows the parent <html> element because the parent has been set to a width of 100% as well, so it will be the maximum width of the child (body) "content area" rather than the area it actually effects on the screen. This is why the border on the bottom right of your example has blue outside the red; because the system thinks:
This container [the screen size] has a width of X so I need to be X wide for my contents and then I can add my border and my margin
the child element meanwhile processes:
I must take up all the width of my parent, plus my border and plus my margin that I have.
Be default <body> has a natural margin on it, and the border itself set on <html> will force its child elements to be within the border rather than on top of the border.
My fixes to remove default settings and browser inherited styles, and force the box model to respect all areas of the box not just the contents.
Tweaked Version of your HTML:
html {
width: 100%;
height: 100%;
border: solid 30px red;
box-sizing: border-box;
}
body {
margin: 0; /* Added to body */
width: 100%;
height: 100%;
border: solid 30px blue;
box-sizing:border-box;
/* often added to the *{ .. } element to apply to all elements on a page */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>demo 2</title>
<style>
</style>
</head>
<body>
Hello 2
</body>
</html>
CSS Changes made:
Removed default margin on the body element.
Changed box-sizing to border box whereby the DOM Box model is set to the border rather than simply the box contents.
Yeah! If sometimes you see a web developer pulling his hair or gnashing his teeth, he is probably messing up with this problem. You may think that when you determine the height of a block-level element it includes the content box to the outer side of the border. But it is not! When you set the height of an element you only set its content's size, and not the borders and paddings. It is really common for developers to set all element to have box-sizing of border-box. You can do this by adding this peace of code to the top of your css style. :
*{
box-sizing: border-box;
}
So, here is your code result after adding this property. Also, note that the body element has a default margin. Be sure to disable that too:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style>
*{
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
border: solid 30px red;
}
body {
width: 100%;
height: 100%;
margin:0;
border: solid 30px blue;
}
</style>
</head>
<body>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style>
html {
box-sizing:border-box;
width: 100%;
height: 100%;
border: solid 30px red;
}
body {
margin:0;
box-sizing:border-box;
width: 100%;
height: 100%;
border: solid 30px blue;
}
</style>
</head>
<body>
<script>
</script>
</body>
</html>
My header does not fully covers my page making the background color overlaps them both together.
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: black;
background-size: 100% auto;
margin-left: 0;
margin-top: 0;
}
</style>
</head>
<body style="background-color: blue;">
<div id="header">
<p>hi</p>
</div>
</body>
</html>
This is because browsers have a default margin / padding.
//edit HTML default body margin
Add this to your css
html,body{
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
You need to set both html and body height, then #header height, like so
html, body, #header {
height: 100%;
margin: 0;
padding: 0;
}
#header {
background-color: blue;
}
p{
margin: 0;
padding: 0;
}
<div id="header">
<p>
Hi!
</p>
</div>
If you inspect the html and check the CSS applied to body tag, you will see that it has a default margin: 8px. You will have to make it 0.
Use margin: 0px to set the new margin to body tag.
Firefox (for example) indicates that there is a "border" of 8. Adding border: 0 to body's style made the thin blue borders to the left and right disappear. Is that what you wanted?
Sorry, if my problem is a little bit too specific, but I have not found the answer anywhere else. On my website, there is a header that is supposed to take up the whole width of the screen, but it does not. There is always a blank space between the top, and the sides. I have tried display: block; min-width: 100%, just width: 100% and many more variations but I just can't find out how to get rid of it. Anybody have ideas? Thanks!
FULL CODE
/* GLOBAL */
body {
/*background-color: #1abc9c;
display: block;
min-width: 100%;*/
}
#content {} header {
display: block;
min-width: 100%;
height: 100px;
background-color: #34495e;
border-top: 5px solid #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
</head>
<body>
<div id="content">
<header>
<img src="REPLACE.png" />
</header>
</div>
</body>
</html>
By default, the browser adds some margin to body element. Thus to fix it, add margin:0; to your body CSS.
body {
margin:0;
}
JSfiddle demo
I just want to design a simple chat with CSS for learning purpose, but I can not understand, why the 2 DIV container are not showing off like I would them to.
Here is my current code:
<!DOCTYPE HTML>
<html>
<head>
<title>Chat</title>
<meta charset="UTF-8">
<style type="text/css">
* {
font-size: 36px;
}
#messages {
height: 95%;/* Does not work but for example 500px works */
width: 80%;
float: left;
background: grey;
overflow: auto;
}
#users {
height: 95%;/* Does not work but for example 500px works */
width: 20%;
background: dimgrey;
overflow: auto;
}
input {
width: 100%;
height: 5%;
background: lightgrey;
}
</style>
</head>
<body>
<section>
<div id="messages"></div>
<div id="users"></div>
<input type="text">
</section>
</body>
So why does it work with px and with % it does not ?
When using percentages for height, the height is relative to a parent, so you need to establish a baseline. Typically this is done by setting the height on the html and body elements. In your case, you'd also need to set it on the section:
html, body, section {
height:100%;
}
jsFiddle example