Почему цвет фона моего нижнего колонтитула не заполняет весь нижний колонтитул? - PullRequest
Новая
       10

Почему цвет фона моего нижнего колонтитула не заполняет весь нижний колонтитул?

0 голосов
/ 23 февраля 2019

Мой нижний колонтитул работает нормально, пока я не протестирую отзывчивость моего сайта.Когда я делаю сайт меньше, нижний колонтитул становится 2-мя строками и выходит за пределы фона нижнего колонтитула.Как я могу это исправить?Должен ли я добавить медиа-запрос? 

html {
position: relative;
min-height: 100%;
}

html, body {
margin: 0;
padding: 0;
}

.pageContentWrapper {
padding-bottom: 50px; /* Height of footer*/
}

/* Footer */
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: lightgray;
text-align: center;
color: black;
font-size: 18px;
font-family: Verdana, serif;
}

1 Ответ

0 голосов
/ 23 февраля 2019

Сделайте цвет фона страницы нижним колонтитулом и установите цвет фона для содержимого белым. 

body,html{
  padding: 0;
  margin: 0;
  background-color: lightgrey;
}

.main-content{
  background-color: white;
  overflow: auto;
  padding: 20px;
}

.footer{
  padding: 20px;
}
<div class="main-content">
<h1>Lorem ipsum</h1>
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
</div>

<div class="footer">FOOTER CONTENT HERE</div>
...