How to fix the box?

Question

I have a box which contain a simple header and footer. The problem is that appears a scrollbar at the bottom which I don't wont. I know that is very stupid as question but I don't figure out how to fix it.

.box{
    width: 100%;
    height: 100%;
}

.header {
    background: tomato;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5%;
}

.footer {
    background: lightgreen;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5%;
}

<!DOCTYPE html>
<html>
<title>Test</title>
<head>
    <link rel="stylesheet" href="Style/StyleSheet.css">
    <script type="text/javascript" src="Script/Script.js"></script>
    <title>Test</title>
</head>
<body>
    <div class="box">
        <header class="header">Header</header>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

`body {margin: 0}` – Niet the Dark Absol Jun 12 '19 at 10:40 — Niet the Dark Absol, Jun 12 '19 at 10:40
or `left:0` to position:absolute element – Temani Afif Jun 12 '19 at 10:44 — Temani Afif, Jun 12 '19 at 10:44

score 1 · Accepted Answer · answered Jun 12 '19 at 10:44

By default the browsers give custom margin to body. Just set

body{
  margin:0;
}

body{
  margin:0;
}

.box{
    width: 100%;
    height: 100%;
}

.header {
    background: tomato;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5%;
}

.footer {
    background: lightgreen;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5%;
}

<!DOCTYPE html>
<html>


<title>Test</title>



<head>
    <link rel="stylesheet" href="Style/StyleSheet.css">
    <script type="text/javascript" src="Script/Script.js"></script>
    <title>Test</title>
</head>



<body>
    <div class="box">
        <header class="header">Header</header>




        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

score 0 · Answer 2 · answered Jun 12 '19 at 10:44

Applymargin:0 for the body

body {
  margin: 0;
}

.box {
  width: 100%;
  height: 100%;
}

.header {
  background: tomato;
  position: absolute;
  top: 0;
  width: 100%;
  height: 5%;
  padding: 10px 0px
}

.footer {
  background: lightgreen;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5%;
  padding: 10px 0px
}

<!DOCTYPE html>
<html>
<title>Test</title>

<head>
  <link rel="stylesheet" href="Style/StyleSheet.css">
  <script type="text/javascript" src="Script/Script.js"></script>
  <title>Test</title>
</head>

<body>
  <div class="box">
    <header class="header">Header</header>

    <footer class="footer">Footer</footer>
  </div>
</body>

</html>

How to fix the box?

2 Answers2