I have a project and I am having trouble fitting everything inside the body. Child elements always go outside of the body, when I looked at my code it looks like okay, so I made an experiment; I trace each HTML element by giving them a border, so that I can see them visually how they will behave. This is what I have so far.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>A nice example</title>
</head>
<body>
<div class="box">
<div class="childbox"></div>
</div>
</body>
</html>
CSS Example 1, setting 100% height for everything
html{height: 100%; border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : everything overflows outside html.
CSS Example 2, setting 100% height for the body and its child's, except html
html{border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : Everything fits inside html, but doesn't occupy the full height of the screen. I know I can do this by making the body min-height: 100vh.. but it will stop expanding when the 100vh is full..
My goal is,
to make the body and html 100% in height / not using vh.
and not overflow outside the body, or html
when adding child elements I want everything from html to body expands in height dynamically and not go outside and overflow, or overlaps each other..
the body should be inside html, and the div's should be inside the body.
Please help.
This is what is happening, the CSS is calculating 100% width and height and then it adds a 10px / 5px padding after which causes the elements to overflow by 10 / 5px.
You can change this by adding the following css at the beginning of your code:
* {
box-sizing: border-box;
//Edit:
margin: 0;
padding: 0;
}
This will make sure that the padding is accounted for in the 100% width and height.
Hope this works!
Edit:
Also, what you are looking for in the html and body style is height: auto; not 100%.
If its happening it means that you are not following CSS box model during styling your sheet. you can also use box-sizing property of CSS.
Consider an example
<div id="frame">This is the frame
</div>
Then use box-sizing property and set its value to border-box.
<style>
#frame{ width: xx% height:yy%; box-sizing:border-box; }
</style>
Related
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>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
CSS position absolute and full width problem
(7 answers)
Closed 3 years ago.
Please see the code below. The footer is not touching the edges. if I poot footer width to 100% or 100vw i see a horizontal scrollbar in the browser. 99% falls short. Instead of finding a hardcoded value like 99.4% etc. is their way to touch the edges perfectly?
.main .footer {
border: 1px solid black;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
height: 40px;
width: 99%;
}
<div class="main">
<div class="footer"></div>
</div>
Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
In your current example, the default body will have a margin set. To make the body of the document touch the edges, you will need to add a reset to the body margin, margin: 0;
Read more about it here. https://cssreset.com/what-is-a-css-reset/
You need to remove the margin on the body element. Then since you're using absolute positioning, remove the width declaration and use left/right:
body {
margin:0;
}
.main .footer {
border: 1px solid black;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 40px;
}
body {
margin: 0;
}
<div class="main">
<div class="footer"></div>
</div>
Apply a CSS reset, by default, it have padding and margin setted, that why it not fit the edge:
*{
margin:0;
padding:0;
}
.main {
border: 1px solid black;
background-color: #d4d4d4;
height: 90vh;
}
.footer {
border: 1px solid black;
background-color: #d4d4d4;
height: 10vh;
}
<body>
<div class="main">
Your content
</div>
<div class="footer">
Your Footer
</div>
</body>
You should add the left attribute too, and you put a border, that border occupies a space, i used box-sizing: border-box; option to use the inside space of the element.
I attached some useful links for you:
box-sizing,
box-model
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.main .footer {
border: 1px solid black;
box-sizing:border-box;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
left:0;
height: 40px;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="footer"></div>
</div>
</body>
</html>
Firstly I would recommend to use the new tags <header>, <main>& <footer> instead div with class.
Secondly the problem is that the body have a initial margin so try:
body{ margin:0; }
After that you will still have a scrollbar because of the border.
So you have two options:
Set border-top instead of left and right.
Give all elements the style * {box-sizing: border-box;} which means padding and border is included of the elements total width and height.
I'm a beginner who wants to visualize the html and css changes that I make while learning and so I would like to put a border around all the elements that I add.
Problem: The blue border around the html/body element cuts off and isn't fully displayed on the bottom and right sides of the border when overflow is set to hidden.
Why is it that the border is overflowing the html page even when its width and height are set to 100%?
HTML
<!DOCTYPE html>
<html>
<head>
<title> Practice Webpage </title>
<link href="stylesrevised.css" rel="stylesheet" type="text/css" >
</head>
<body></body>
</html>
CSS
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
overflow:hidden;
display:block;
}
Here is the resulting webpage
Welcome to the coding journey!!! In your css, add the following: box-sizing: border-box;
This will make your elements fit within the prescribed width and height.
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
overflow:hidden;
display:block;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title> Practice Webpage </title>
<link href="stylesrevised.css" rel="stylesheet" type="text/css" >
</head>
<body></body>
</html>
your overflow: hidden; is whats messing things up for you, the default setting for borders is content-box which adds pixels to the width and height of your elements, eg if you have a div 100px wide and add a 1px border to it is actual size will be 102px.
you can solve this by using box-sizing: border-box; which causes the border to be added to the inside of the element instead.
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
display:block;
box-sizing: border-box;
}
If you want to make this effect all borders used through out your site you can use this, saves having to set it each time you add a border.
*, *:before, *:after {
box-sizing: border-box;
}
I am trying to understand how to get a full width header. The problem is it has a thin white border around the header and is not full width. I am not using any grid system if that matters.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" display="screen" >
<title>
test app
</title>
</head>
<body>
<div id="header"/>
</div>
</body>
</html>
CSS
#header {
float:left;
padding:15px 0;
min-width:100%;
background: #5FBEED;
}
Any help much appreciated thanks.
I suppose the problem to be getting the white border around it. A div automatically fills the entire window's width, so remove that min-width style: Example fiddle.
CSS:
#header {
padding: 15px 0;
border: 10px solid white;
background: #5FBEED;
}
Add this to your css
body{ margin: 0; padding: 0; }
Browsers add their own css to html elements and this varies from browser to browser. The margin and padding is also applied to UL and few other elements...
You can read more about this here... http://clagnut.com/blog/1287/
The white border is mostly likely added by the BODY tag's inherent margin. Try adding the following CSS:
body {
margin: 0;
}
html, body{
padding: 0;
margin 0;
}
#header {
padding: 15px 0;
border: 10px solid #5FBEED;
background: #5FBEED;
}
in this case your borders will be the same color as your header background color
About a year ago, a question was asked on stackoverflow about how to horizontally align input and textarea elements: input width vs textarea width
I have some HTML + CSS where I am trying to do precisely this, but I find that no matter what combination of CSS reset and precise, pixel-based width definitions I use, I simply can't get the elements on my page to line up on the right side (left alignment happens automatically). Here's some simple demonstration code.
<!doctype html>
<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;} /* primitive reset */
body {width: 200px; margin-left:auto; margin-right: auto;
border: 1px solid black;}
input {border: 1px solid black; width: 200px;}
div {border: 1px solid black;}
textarea {border: 1px solid black; width: 200px;
}
</style>
</head>
<body>
<input type="text" value="textinput">
<div>div</div>
<textarea>textarea</textarea>
</body>
</html>
If I change the widths on input and textarea, I can get them to line up in, say, chrome. But then they won't line up in Firefox. And vice-versa. By default, even with the css reset, one element or the other will overlap the containing div on the right side. You can remove the borders I've set and use the browsers' respective DOM inspectors if you want.
I have spent too many hours futzing around with this issue, so I'm wondering if someone on here knows if what I'm trying to do is even possible.
This is indeed frustrating. Your best bet would be removing the borders from the input elements and wrapping them in another fixed-width element with a border, e.g. a <div>.
<!DOCTYPE html>
<html>
<head>
<title>SO question 3577146</title>
<style>
* { margin: 0; padding: 0; } /* primitive reset */
body { width: 200px; margin: 0 auto; border: 1px solid black; }
div { width: 200px; border: 1px solid black; }
input { width: 198px; border: 0; }
textarea { width: 198px; border: 0; }
</style>
</head>
<body>
<div><input type="text" value="textinput"/></div>
<div>div</div>
<div><textarea>textarea</textarea></div>
</body>
</html>
Here's a jsfiddle demo.