how to make the footer touch the edges?

Question

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>

you could try change border to border-top and then do 100% width. — Funk Doc, Jul 19 '19 at 18:50
Advice: never use `width:100%` with absolute of fixed element, use `left:0;right:0` instead — Temani Afif, Jul 19 '19 at 19:41

j08691 · Answer 1 · 2019-07-19T18:53:17.723

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>

score 0 · Answer 2 · answered Jul 19 '19 at 18:50

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/

Also in your example, the footer has a border of 1px. Without reseting the box-sizing of the footer, the footer will be 100% wide + 1px on each side. To fix this easily, add `box-sizing: border-box;` to the footer. Most resets will have a universal box-sizing reset included. — Brad, Jul 19 '19 at 18:54

score 0 · Answer 3 · answered Jul 19 '19 at 18:56

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>

score 0 · Answer 4 · edited Jul 19 '19 at 19:02

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.

score 0 · Answer 5 · answered Jul 19 '19 at 18:58

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>

how to make the footer touch the edges?

5 Answers5