CODEWITHSUNDEEP
htmlcss
StratHaxxs
StratHaxxs

Reputation: 61

CSS Footer 100% width adds a scrollbar

The footer on this page: https://jsfiddle.net/strathaxxs/bbhr1j38/ does not work and I've tried many things, please help me. Here's the code:

    <title>Homepage</title>
  <style>
  html {
    height: 100%;
        margin: 0;
    padding: 0;
}
body {
    font-family: Roboto;
min-height: 100%;
margin: 0; 
padding: 0;
font-family: sans-serif;
}
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
  </style>


<div id="header">
<h1>bla bla bla </h1>
</div>

<div id="nav">
bla <br>
bla bla <br>
bla 
</div>

<div id="section">
<h2>bla bla </h2>
<p>bla bla bla bla bla bla bla bla bla </p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

<div id="footer">
Copyright &copy; StratHaxxs.org
</div>

All it does is is add a scrollbar. I have had this problem ever seince i've started making websites

Upvotes: 2

Views: 1511

Answers (4)

David Chelliah
David Chelliah

Reputation: 1349

One of the repeated issue that occurred to many HTML web developers, is on how the padding actually behaves.

Margin : it is outside the element's width.

Padding : It is inside the element, AND it adds up to the elements width.

So 100% of width + 5px left and + 5px right will result in the element's width greater than 100%.

So in order to avoid the confusion caused on how padding behaves, following property was introduced

box-sizing:border-box;

The above property denotes that the padding is part of the 100% width. It doesn't cause the element to exceed 100%.

This property has become the basic part of all responsive framework, to provide the developers with a very clear idea while handling their grid elements in percentage.

*{
  box-sizing:border-box;
}
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

#nav {
  line-height: 30px;
  background-color: #eeeeee;
  height: 300px;
  width: 100px;
  float: left;
  padding: 5px;
}

#section {
  width: 350px;
  float: left;
  padding: 10px;
}

#footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
<title>

  Homepage</title>
<div id="header">
  <h1>bla bla bla </h1>
</div>

<div id="nav">
  bla
  <br> bla bla
  <br> bla
</div>

<div id="section">
  <h2>bla bla </h2>
  <p>bla bla bla bla bla bla bla bla bla </p>
  <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

<div id="footer">
  Copyright &copy; StratHaxxs.org
</div>

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46579

One way of solving this is to set the footer's box-sizing property to border-box. Doing that will include the 5px padding in the total size; otherwise the total width will be 100% plus 2 × 5px from the padding.

https://jsfiddle.net/bbhr1j38/1/

#footer {
  background-color:black;
  color:white;
  clear:both;
  text-align:center;
  padding:5px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  box-sizing:border-box;
}

Upvotes: 2

Ted Goas
Ted Goas

Reputation: 7587

Try this:

#footer {
    ...
    padding:5px 0; /* Remove the horizontal padding, keep the vertical padding */
    width: 100%;
    ...
}

Basically having these two propoerties set on the same element made the width 100% of the viewport plus 5 pixels on either side (100% + 10px). The extra 10px made the scrollbar appear.

Upvotes: 2

user4759415
user4759415

Reputation:

Just take your padding off of the footer. Because you have it absolute positioned and set to 100% width it is forcing a scroll bar when you add the padding.

https://jsfiddle.net/t2zya13k/

#footer {
   background-color:black;
   color:white;
   clear:both;
   text-align:center;
   /*padding:5px;*/
   width: 100%;
   position: absolute;
   bottom: 0px;
   left: 0px;
}

Upvotes: 2

Related Questions