css height property is not working for body element
Question
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>
2 answers
solution1
1 2020-06-17 17:36:23
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
solution2
0 2020-09-13 15:54:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.