I aim to have just the footer section perfectly aligned within the screen, without the entire body extending beyond

Question

I aim to have just the footer section perfectly aligned within the screen, without the entire body extending beyond

I am encountering an issue with the footer tag once again. I need this section to occupy the entire screen, without affecting the rest of the body content. That is why I omitted setting margin:0; for body elements.

I attempted to apply margin:0 to the footer, but it did not yield the desired result (highlighted in the image). How can I resolve this issue?

Here is the CSS code for my footer:

footer {
 padding: 5vw;
 margin: 0px;
 background-color: #DCEDC8;
 color: black;
 font-size: 4vw;
 text-align: center;
 font-weight: bold;
}

[1]: https://i.sstatic.net/kCczY.jpg![ The footer does not stretch across the screen correctly](https://i.sstatic.net/dblej.jpg)

html css

Answer 1

Answer №1

Your current issue stems from the default margin set on the body element, affecting all elements within it (including your footer).

To resolve this, you should add margin: 0 to the body and enclose your content within a container div (with its own margin).

Place your footer outside the container with a margin of 0.

body {
  margin: 0;
}

.container {
  margin: 8px;
  background-color: #9f9f9f;
}

footer {
  margin: 0;
  background-color: #ff5555;
}

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <div class="container">
      Your content goes here. Please note the margin surrounding this div.
    </div>
    <footer>
      Your footer goes here. No margin surrounds this footer.
    </footer>
  </body>

</html>

Answer 2

Your current issue stems from the default margin set on the body element, affecting all elements within it (including your footer).

To resolve this, you should add margin: 0 to the body and enclose your content within a container div (with its own margin).

Place your footer outside the container with a margin of 0.

body {
  margin: 0;
}

.container {
  margin: 8px;
  background-color: #9f9f9f;
}

footer {
  margin: 0;
  background-color: #ff5555;
}

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <div class="container">
      Your content goes here. Please note the margin surrounding this div.
    </div>
    <footer>
      Your footer goes here. No margin surrounds this footer.
    </footer>
  </body>

</html>

I aim to have just the footer section perfectly aligned within the screen, without the entire body extending beyond

Answer №1

Similar questions

Generating a dynamic method for uploading multiple files

Enhance your AngularJS table with a custom Javascript context menu!

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

What is the best way to create a gallery using Bootstrap 4?

Parsing text files with Highcharts

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

Is it possible to have the Target='_blank' attribute open the link in a new window instead of a new tab?

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

Guide to organizing an HTML table column with a header click using PHP and MySQL

The information overflow occurs outside the tooltip specifically in Chrome, while functioning perfectly in IE11

When scrolling the page, the onscroll event is activated two times

Whiskey Angostura and Straight Row Set to 8, not 12

(Material UI version 5) Custom global style enhancements

Having trouble embedding the video in an iframe. Any tips on how to make it work?

Unlocking the AngularJS variable within the template script

Initiating the accordion feature requires two clicks and triggers an rotation of the icon

Utilizing Node-Red: Linking an External CSS File with HTML Elements

Use JQuery version 1.8 or above to link the mousewheel

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

Implementing AngularJS drag and drop functionality in a custom directive