Geek Answers Handbook

The width of the footer does not change to 100% when you resize the browser window

I have two divs. One is the body of my page and the other is the footer of my page. The footer should be 100% of the width, even when resizing the browser window.

My webpage is as follows:

enter image description here

When resizing the browser window, a scroll appears:

enter image description here

If I scroll horizontally, my footer is no longer 100%:

enter image description here

What should I do to ensure that my footer is always 100% wide?

<body> <div id="header"></div> <div id="footer"></div> </body> #header { height: 500px; width: 1100px; margin: 0 auto; background: grey; } #footer { background: #6B191C; position: absolute; left: 0; height: 100px; width: 100%; margin-top: 60px; }
+5
source share
4 answers

I just found a solution here: http://www.impressivewebs.com/fluid-header-footer-problem/

Setting the minimum width in the footer with the same width of the main div (1100px).

I changed the css of my footer to this:

 #footer { background: #6B191C; height: 100px; margin-top: 60px; min-width: 1100px; }

And added some properties to the body:

 body { width: 100%; margin: auto; }

This link shows a web page with this problem, and another one with the solution used: http://www.impressivewebs.com/demo-files/fluid-header-footer/

+2
source

Use vw instead of % . 1vh is 1% of the browser view.

 #footer { background: #6B191C; position: absolute; left: 0; height: 100px; width: 100vw; margin-top: 60px; }

There is more relative length than just vw . Exist:

  • vh - Relatively 1% of the height of the viewport
  • vw - Relatively 1% of the width of the viewport
  • vmin - Relatively 1% smaller viewport size
  • vmax - Relatively 1% larger viewport

source: https://developer.mozilla.org/en-US/docs/Web/CSS/length

+1
source

Remove width from the footer and add right: 0; . It will spread your footer from the left side to the right side. So your CSS will be as follows:

 #footer { background: #6B191C; position: absolute; left: 0; right: 0; height: 100px; margin-top: 60px; }

Here is a working example http://codepen.io/anon/pen/MwRJqv .

0
source

The most reasonable reason would be that your id #footer contains properties

  position: absolute; left: 0; right: 0;

which composes width: 100%; inside your #footer, so for a quick fix these properties will be removed to return the normal flow of the element.

0
source

More articles:


All Articles