CSS Footer 100% ширина добавляет прокрутку

Question

Нижний колонтитул на этой странице: https://jsfiddle.net/strathaxxs/bbhr1j38/ не работает, и я пробовал много вещей, пожалуйста, помогите мне. Вот код:

<title>Homepage</title> 
    <style> 
    html { 
    height: 100%; 
     margin: 0; 
    padding: 0; 
} 
body { 
    font-family: Roboto; 
min-height: 100%; 
margin: 0; 
padding: 0; 
font-family: sans-serif; 
} 
#header { 
    background-color:black; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    float:left; 
    padding:5px; 
} 
#section { 
    width:350px; 
    float:left; 
    padding:10px; 
} 
#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 
    </style> 


<div id="header"> 
<h1>bla bla bla </h1> 
</div> 

<div id="nav"> 
bla <br> 
bla bla <br> 
bla 
</div> 

<div id="section"> 
<h2>bla bla </h2> 
<p>bla bla bla bla bla bla bla bla bla </p> 
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
</div> 

<div id="footer"> 
Copyright &copy; StratHaxxs.org 
</div> 

Все, что он делает, это добавить полосу прокрутки. У меня была эта проблема когда-либо, я начал создавать веб-сайты

Answer 1

Попробуйте это:

#footer { 
    ... 
    padding:5px 0; /* Remove the horizontal padding, keep the vertical padding */ 
    width: 100%; 
    ... 
} 

В основном, имеющий эти два propoerties, установленные на том же самом элементе сделали ширину 100% видового экрана плюс 5 пикселей по обе стороны (100 % + 10px). Дополнительные 10px сделали полосу прокрутки.

Answer 2

Просто снимите нижний колонтитул. Поскольку у вас есть абсолютная позиция и установлен на 100% ширину, она вынуждает полосу прокрутки при добавлении дополнения.

https://jsfiddle.net/t2zya13k/

#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    /*padding:5px;*/ 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

Answer 3

Один из способов решения этой проблемы - установить box-sizing нижнего колонтитула на border-box. Это будет включать в себя 5px дополнение в общем размере; в противном случае общая ширина будет равна 100% плюс 2 × 5 пикселей от прокладки.

https://jsfiddle.net/bbhr1j38/1/

#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    box-sizing:border-box; 
} 

Answer 4

Один из повторяющейся вопроса, который произошел на многих веб-разработчиков HTML, это о том, как на самом деле ведет себя обивка.

Маржа: она находится за пределами ширины элемента.

Прокладка: внутри элемента, И это добавляет ширину элементов.

Таким образом, 100% ширины + 5 пикселей слева и + 5 пикселей справа приведет к ширине элемента больше 100%.

Поэтому для того, чтобы избежать путаницы, причиной того, как ведет себя обивка, следующее свойство было введено

box-sizing:border-box; 

выше свойство означает, что прокладка является частью шириной 100%. Это не приводит к тому, что элемент превышает 100%.

Это свойство стало основной частью всей гибкой структуры, чтобы предоставить разработчикам очень четкую идею при обработке их элементов сетки в процентах.

*{ 
 
    box-sizing:border-box; 
 
} 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: Roboto; 
 
    min-height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 

 
#header { 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 

 
#nav { 
 
    line-height: 30px; 
 
    background-color: #eeeeee; 
 
    height: 300px; 
 
    width: 100px; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 
#section { 
 
    width: 350px; 
 
    float: left; 
 
    padding: 10px; 
 
} 
 

 
#footer { 
 
    background-color: black; 
 
    color: white; 
 
    clear: both; 
 
    text-align: center; 
 
    padding: 5px; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
}

<title> 
 

 
    Homepage</title> 
 
<div id="header"> 
 
    <h1>bla bla bla </h1> 
 
</div> 
 

 
<div id="nav"> 
 
    bla 
 
    <br> bla bla 
 
    <br> bla 
 
</div> 
 

 
<div id="section"> 
 
    <h2>bla bla </h2> 
 
    <p>bla bla bla bla bla bla bla bla bla </p> 
 
    <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
 
</div> 
 

 
<div id="footer"> 
 
    Copyright &copy; StratHaxxs.org 
 
</div>