Question

我的页脚工作正常，直到我测试了网站的响应能力。当我缩小网站大小时，页脚变为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;
}

Answer 1

将页面的背景颜色设置为页脚颜色，并将内容的背景颜色设置为白色。

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>

为什么页脚的背景色无法填充整个页脚？

1 个答案: