All geek questions in one place

CSS width: 100% not suitable for the screen

I am trying to make my footer at the end of the page, so I use the position: absolute and bottom: 0 for this. The problem is that the background color will not be expanded to fit the screen, so I tried to use width: 100%, but now it has extra pixels.

this is the example i created http://jsfiddle.net/SRuyG/2/ (sorry this is a little dirty, I'm just starting to learn css)

I also tried the sticky footer from some of the lessons I found, but it doesn't work either. So, how exactly can I set the footer at the bottom of the page and the background matches the screen size?

thanks

CSS

html, body { margin: 0; padding: 0; } body { font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } .contentWrapper{ min-height: 100%; margin-bottom: -142px; } .contentWrapper:after { content: ""; display: block; height: 142px; } nav { background: #222; color: #fff; list-style: none; font-size: 1.2em; padding: 10px 20px; box-shadow: 0px 0px 4px 4px #888888; } #navBar li{ display:inline; } #navBar li a{ color: #fff; text-decoration: none; padding: 25px; } #navBar li a:hover{ background:#fff; color: #222; text-decoration: none; padding: 25px; } footer { position:absolute; background: #222; color: #fff; list-style: none; font-size: 1.2em; padding: 10px 20px; bottom:0; width: 100%; }

HTML:

 <body> <nav> <ul id='navBar'> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </nav> <div id="contentWrapper"> <section id="intro"> <header> <h2>Intro</h2> </header> <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. </p> </section> </div> <footer> <section id="about"> <header> <h3>Footer</h3> </header> <p>some text here. </p> </section> </footer> </body>
+6
source share
5 answers

Try using box-sizing: border-box; to limit borders and padding areas to <footer> width - as a padding: 10px 20px rule padding: 10px 20px which causes the scrollbar to appear.

 footer { position:absolute; background: #222; color: #fff; list-style: none; font-size: 1.2em; padding: 10px 20px; bottom:0; width: 100%; box-sizing: border-box; }

http://jsfiddle.net/SRuyG/4/

+5
source

you can remove padding: 10px 20px; from the footer and add footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

+2
source

Your footer is inside the body that is inside the HTML. Since you have not declared a width, it will not expand if it is wider than necessary. For your specific HTML, you should do something like this with your CSS:

 body, html { width: 100%; // or body { width: 960px; } if you're using a fixed width } footer { width: 100%; }

Ultimately, remember that any width set as a percentage (almost) will always be compared to the parent. 100% 50% of parents are still 50%. 50% of a 75% parent will receive only 37.5% of the total width of the viewport.

+1
source

try it.

remove these rules from the footer .. you'll be fine

 position:absolute; bottom:0; width:100%;

updated fiddle here

0
source

Below css, I removed the padding property

 footer { position:absolute; background: #222; color: #fff; list-style: none; font-size: 1.2em; bottom:0; width: 100%; }

and add this thing to ur css

  footer section { margin:10px 20px; }
0
source

Source: https://habr.com/ru/post/950391/

More articles:


All Articles