Блог

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

  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%;
  }
  

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

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

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

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

к этому

 * {
   margin:0;
   padding:0;
}    

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

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

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

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

Вот почему используются сбросы CSS, чтобы перейти к базовому стандарту между браузерами.