Почему это было неправильно?О нижнем колонтитуле внизу

Question

Я не понимаю. Я написал код, чтобы нижний колонтитул был всегда внизу. Давайте скажем, липкий нижний колонтитул. Вот мой код

 body {
       background-color: #edecd8;
       margin:0;
       padding:0;
        height:100%;

     }

       #container {min-height:100%; position:relative;}



      #body {
        padding-bottom:20px;
      }


    #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:20px;/* Height of the footer */
      background: #FC0;}

</style>

<div id="footer">  contact | the athens store | Mitropoleos 37    </div> 

С этим кодом это не сработало, на самом деле нижний колонтитул был не внизу, а чуть выше. А потом я добавил в самом начале HTML-тег, как это, и это сработало! Почему раньше это было не так?

html,body {
   background-color: #edecd8;
   margin:0;
   padding:0;
   height:100%;
  }

Answer 1

Браузеры

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

Или с помощью простого кода

если вы замените это

html,body {
   background-color: #edecd8;
   margin:0;
   padding:0;
   height:100%;
  }

к этому

* {
   margin:0;
   padding:0;
}    

body {
   background-color: #edecd8;
   height:100%;
}

это будет работать и переписывать все поля и поля браузера по умолчанию

Answer 2

Браузеры имеют стандартный (и часто различающийся) CSS для элементов.К элементу html могли быть применены поля или отступы, немного задерживающие нижний колонтитул.

Или элемент html должен был иметь высоту 100%, чтобы он мог расширяться на всю высотуwindow.

Именно поэтому CSS-перезагрузки используются для достижения базового стандарта между браузерами.