Ширина CSS: 100% не подходит к экрану

Я пытаюсь сделать мой нижний колонтитул в конце страницы, поэтому я использую позицию: абсолютное и нижнее: 0 для этого. Проблема цвет фона не будет расширена до размеров экрана, поэтому я попытался с помощью ширина: 100%, но теперь она имеет дополнительные пикселиШирина CSS: 100% не подходит к экрану

это пример я создал http://jsfiddle.net/SRuyG/2/ (жаль, что это немного грязный, я только начинаю изучать css)

Я также пробовал липкий нижний колонтитул из некоторых уроков, которые я нашел, но он тоже не работает. Итак, как именно я могу установить нижний колонтитул в нижней части страницы, а фон соответствует размеру экрана?

Спасибо

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>

источник

2013-07-26 punkaceratop

Попробуйте использовать box-sizing: border-box; для ограничения границ и областей заполнения по ширине <footer> - так как правило padding: 10px 20px является тем, что вызывает появление полосы прокрутки.

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/

источник

2013-07-26 19:46:43 Adrift

Ваш сноска находится внутри тела, которое находится в пределах HTML. Поскольку вы не объявили ширину, она не будет расширяться, если она будет более широкой, чем нужно. Для вашего конкретного HTML, вы должны сделать что-то вроде этого с помощью CSS:

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

footer { 
    width: 100%; 
}

В конце концов, помните, что любая ширина устанавливается в процентах (почти) всегда будет по сравнению с родителем. 100% 50% родителей все еще 50%. 50% 75% -ого родителя будут получать только 37,5% от общей ширины видового экрана.

источник

2013-07-26 19:46:29 mikedugan

вы можете удалить padding: 10px 20px; из колонтитула и добавить footer section{margin:10px 20px}

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

источник

2013-07-26 19:51:30 David

Этот метод лучше, чем принято отвечать, если вам нужно для поддержки IE7 или ниже, что не поддерживает свойство box-sizing. –

попробовать это ..

удалить эти правила из footer..you'll быть штраф

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

updated fiddle here

источник

2013-07-26 20:03:38 sa77

Снизу CSS Я удалил свойство

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

    }

обивка и добавить эту вещь в Уре CSS

footer section 
    { 
     margin:10px 20px; 

    }

источник

2013-07-27 20:47:15

Ширина CSS: 100% не подходит к экрану

ответ

Смежные вопросы