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>

Does this answer your question? [Make body have 100% of the browser height](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) — Hemant Parashar, Jun 17 '20 at 17:34
The reason behind this is probably because when you try to add margins to all the sides, it also adds the margin to the top. Thus, pushing the yellow div down. — Soban, Jun 17 '20 at 17:34
Vertical margins (top and bottom) are actually relative to the _width_ of the element, not the height. So 90% + (2 * 5%) does not necessarily equal 100%. Instead, use vh units: https://codepen.io/3rror404/pen/GRoNyOE — Turnip, Jun 17 '20 at 17:45
i want body square to fit in the center without any page movement. width side does note move, it works fine but vertical side is not working, its moving..for width side (90% body +2(5% margin))=100%......but for height (90% body +2(5%)) != 100.....why there is difference. — iamaksingh11, Jun 18 '20 at 04:55

bron · Answer 1 · 2020-06-17T17:58:42.520

1

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

edited Jun 17 '20 at 17:58

answered Jun 17 '20 at 17:36

bron

1,457
1
9
18

2

It wasn't me, but [Why isn't providing feedback mandatory on downvotes, and why are ideas suggesting such negatively received?](https://meta.stackoverflow.com/q/357436/1115360) has explanations of the problems with that. Having said that, you presented the CSS with no explanation of *why* it would help. – Andrew Morton Jun 17 '20 at 17:45
You're right about the explanation, I added the comments inline in the css. I agree with your that I may not ask for an upvote but in some cases like this question there are 2 minutes or less between my answer and the downvote. It feels that the downvote was there before trying my answer. – bron Jun 17 '20 at 18:07

score 0 · Answer 2 · answered Sep 13 '20 at 15:54

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>

css height property is not working for body element

2 Answers2