Как удалить пробел между нижним колонтитулом и нижней частью страницы? - PullRequest
Новая
       1

Как удалить пробел между нижним колонтитулом и нижней частью страницы?

0 голосов
/ 27 мая 2020

В настоящее время я застрял над проблемой. Между нижним колонтитулом и нижней частью страницы есть промежуток. Некоторая информация и вещи, которые я пробовал, но не сработали:

  • body и html имеет 0 полей и 0 отступов
  • Изменить размер тела
  • пытается изменить положение нижнего колонтитула
  • возможно, еще кое-что, но уже забыл об этом

Вот код:

HTML

<body>
    <section>
      <div class="section1">
          ...
      </div>
    </section>
    <footer>
      ...
    </footer>
  </body>

CSS

html, body, header, nav, section, footer{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Cairo', sans-serif;
  scroll-behavior: smooth;
  background-color: #ededed;
}
body{
  position: relative;
}
section{
  margin-top: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 880px;
}
footer{
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display: flex;
  justify-content: center;
  height: 150px;
  width: 100%;
  background-color: #474747;
}
@media screen and (max-width:1024px){
  section{
    height: 1000px;
  }
}

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

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

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Вы можете попробовать использовать min-height: calc (100vh - height of the header in px - height of the footer in px) и поместить его в раздел. думаю решу.

0 голосов
/ 27 мая 2020

Добро пожаловать в StackOverflow! Вы пытались удалить коды, которые я удалил между этими строками? Вероятно, это решит вашу проблему. 

  html, body, header, nav, section, footer {
  scroll-behavior: smooth;
  background-color: #ededed;
  }

Пример: 

/* html, body, header, nav, section, footer{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Cairo', sans-serif;
  scroll-behavior: smooth;
  background-color: #ededed;
} */

* { /* If you set the width height value for all elements, there will be problems. You can use this to remove all margin and padding values on the page.  */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  position: relative;
}

section {
  margin-top: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 880px;
}

footer {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  height: 150px;
  width: 100%;
  background-color: #474747;
}

@media screen and (max-width:1024px) {
  section {
    height: 1000px;
  }
}
<body>
  <section>
    <div class="section1">
      Sections
    </div>
  </section>
  <footer>
    Footer Area
  </footer>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...