Question 187319 in Html Question posted in
Some basic documentation can be found here.

Html – footer won't fill 100% width of page

This is my footer styled as shown below, but it does not fill the full width of the page. I tried changing the width property to max-width, but it didn’t solve the issue. I noticed that I can still scroll across my page, which shouldn’t be the case. Any help would be greatly appreciated!

.footer {
   width: 100%;
   margin-top: 150px;
   left: 0;
   bottom: 0;
   background-color: #ffe7e8;
}
Tags:

3

Answers


  1. 0

    Try adding position property to your CSS code and padding property to give your footer some spacing.

    .footer {
   position: fixed;
   width: 100%;
   left: 0;
   bottom: 0;
   background-color: #ffe7e8;
}
    Login or Signup to reply.
  2. 0

    I tested it myself and got the same.

    I believe most browsers apply default padding and margin to the <body> tag.

    To remove the padding/margin applied by default, try the following in your css file:

    body {
    padding: 0%;
    margin: 0%;
  }

    That resolved it for me anyway.

    Login or Signup to reply.
  3. 0

    Try adding overflow: hidden;

    This will get rid of the scrolling bars for that element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search