Szerokość CSS: 100% nie pasuje do ekranu

Próbuję ustawić stopkę na końcu strony, więc używam pozycji: bezwzględna i dolna: 0, aby to zrobić. Problemem jest kolor tła nie zostanie przedłużony do rozmiaru ekranu, więc próbowałem przy użyciu width: 100%, ale teraz ma dodatkowe pikseliSzerokość CSS: 100% nie pasuje do ekranu

Jest to przykład stworzyłam http://jsfiddle.net/SRuyG/2/ (przepraszam, że to trochę brudny, Właśnie zaczynam się uczyć css)

Próbowałem również lepkiej stopki z niektórych tutoriali znalazłem, ale to też nie działa. Jak dokładnie ustawić stopkę na dole strony, a tło pasuje do rozmiaru ekranu?

Dziękuję

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>

Źródło

2013-07-26 punkaceratop

Spróbuj użyć box-sizing: border-box;, aby ograniczyć obszary obramowania i paddingu do szerokości <footer> - ponieważ reguła padding: 10px 20px jest przyczyną pojawienia się paska przewijania.

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/

Źródło

2013-07-26 19:46:43 Adrift

Twoja stopka jest w organizmie, który jest w formacie HTML. Ponieważ nie zadeklarowałeś szerokości, nie rozwiniesz się tak daleko, jak to konieczne. Dla konkretnego HTML, należy zrobić coś takiego z CSS:

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

footer { 
    width: 100%; 
}

Ostatecznie, należy pamiętać, że każda szerokość ustawić w procentach jest (prawie) zawsze będzie w stosunku do rodzica. 100% 50% rodzica nadal wynosi 50%. 50% z 75% rodzica daje tylko 37,5% całkowitej szerokości rzutni.

Źródło

2013-07-26 19:46:29 mikedugan

można usunąć padding: 10px 20px; ze stopką i dodać footer section{margin:10px 20px}

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

Źródło

2013-07-26 19:51:30 David

Ta metoda jest lepsza niż przyjętym odpowiedź, jeśli potrzebujesz do obsługi IE7 lub niższej, która nie obsługuje właściwości box-sizing. –

spróbować ..

usunąć te reguły od footer..you'll być dobrze

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

updated fiddle here

Źródło

2013-07-26 20:03:38 sa77

Od spodu css usunąłem właściwość wypełniania

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

    }

i dodać tę rzecz w ur css

footer section 
    { 
     margin:10px 20px; 

    }

Źródło

2013-07-27 20:47:15

Szerokość CSS: 100% nie pasuje do ekranu

Odpowiedz

Powiązane problemy