How can I set right height for the elements?

Question

I set height = 100% for html and body, but I see the vertical scroll. How can I fit my body without the scroll?

Also, I placed into the body two div elements with height = 50%, but I see the bottom border is out of the area of my body. Why does it happen and how can I fix it?

html, body {
      height: 100%;
    }

    body {
      border-color: #00cc00;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
    }

    .div1 {
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

Nimitt Shah · Accepted Answer · 2018-11-02T18:46:41.057

Border size is making the problems. I have removed border from the div1 and added background-color. You will not see div going out. Also, if you remove the border style from body and add margin:0; and padding:0; then you won't see scrollbar. (I am keeping the border to see the fix for first problem)

See the Snippet below:

html, body {
      height: 100%;
      margin:0;
      padding:0;
    }

    body {
      border-color: #00cc00;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
    }

    .div1 {
      background-color:red;
      height: 50%;
      width: 50%;
    }
    
    .div2{
    background-color: pink;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1 div2"></div>
</body>
</html>

Box Sizing

If you need borders then you can use box-sizing:border-box style for div.

See the Snippet below: (Remove the margin-bottom:10px; from body so you won't see scrollbar)

html, body {
      height: 100%;
      margin:0;
      padding:0;
    }

    body {
      border-color: #00cc00;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
      box-sizing: border-box;
      margin-bottom:10px;
    }

    .div1 {
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
      box-sizing: border-box;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

score 1 · Answer 2 · answered Nov 02 '18 at 18:57

Side scroll appears due to default margins of body element. To avoid this you need to set margin: 0; for body. Also it may happen because of box-sizing attribute. Just setting box-sizing: border-box; makes div size 50% including borders thickness

html, body {
      height: 100%;
      box-sizing: border-box;
    }

    body {
      border-color: #00cc00;
      margin: 0;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
    }

    .div1 {
      box-sizing: border-box;
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

Karl · Answer 3 · 2018-11-02T19:59:14.893

The issue is being caused by the pixel-width of the borders that you are including on the different elements. By using the box-sizing property, you can tell the browser that it needs to factor in the border width of elements when doing percentage calculations, such as the height and width.

You can also hide the vertical scrollbar by using overflow-y: hidden;.

Here is the minimum code that you need to achieve this:

<html>
<head>
<title>Sandbox</title>
<style>
html, body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}
body {
  border: 1px solid #00cc00;
}
.div1 {
  box-sizing: border-box;
  border: 1px solid #0099ff;
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>

score 1 · Answer 4 · answered Nov 02 '18 at 19:02

1

   HTML { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; 
   
        border-color: #00cc00;

     
    }

    .div1 {
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

answered Nov 02 '18 at 19:02

I_Al-thamary

3,385
2
24
37

Or you can change the code "HTML { height:100vh; } body {height: 100vh; min-height: 100vh; position:absolute; top:0; bottom:0; right:0; left:0; }" – I_Al-thamary Nov 02 '18 at 19:16

How can I set right height for the elements?

4 Answers4