Пробел между основным разделом и нижним колонтитулом

#html #css #footer

#HTML #css #нижний колонтитул

Вопрос:

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

 #main {
  border: solid;
  width: 100%;
  height: 2000px;
}

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

body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  /* Height of the footer */
  text-align: center;
  vertical-align: middle;
  background-color: rgb(62, 45, 212);
  color: white;
}

 <div id="main"></div>
<div id="container">
  <div id="footer">--------Footer--------</div>
</div>

Ответ №1:

Удалить top: 190px; из #container . Это должно сработать.

Ответ №2:

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

 #main {
  border: solid;
  width: 100%;
  height: 2000px;
}

#container {
  min-height: 100%;
  position: relative;
  margin-top: 50px;
  /* top: 190px; */
}

body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  /* Height of the footer */
  text-align: center;
  vertical-align: middle;
  background-color: rgb(62, 45, 212);
  color: white;
}

 <div id="main"></div>
<div id="container">
  <div id="footer">--------Footer--------</div>
</div>

1. верх: 190px; это должно поместить нижний колонтитул на первый экран (до того, как main увеличит высоту). В конце концов мне нужно, чтобы нижний колонтитул был нижней страницей, и когда основной набирает высоту, нижний колонтитул скручивается вниз, не скрывая основного содержимого. Thaks много!

Ответ №3:

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

 [tag]{
   margin: 0;
}

Ответ №4:

   padding: 10px;

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

   top: 190px;

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