Question

我在HTML for footer中有以下代码。

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type="text/css" href="style_testfooter.css">
</head>
<body>
<div class="footer">
  <p>hello</p>
</div>


<div class="footerdark">
    <p> hello</p>
</div>

</body>
</html>

类似的CSS代码如下：

.footer {
   position: relative;
   left: 0;
   bottom: 110px;
   width: 100%;
   background-color: #303740;
   color: white;
   text-align: center;
   padding: 160px 0px;
}

.footerdark {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #272d35;
   color: white;
   text-align: center;
   padding: 30px 0px;
}

当我尝试从html代码中删除para标签时，页脚的UI会发生变化。原因/错误是什么？

Before removal of p tags

After removal of p tags

Answer 1

您的.footer班级设置了最低值。目前，在p标签到位的情况下，它正在改变较低的页脚高度以覆盖该空白区域。我建议删除bottom: 110px。

注意： p标记是块级元素，因此它们跨越父级的整个宽度并具有设置高度，这会影响其父级的高度。

当从代码中删除段落时，页脚会更改其UI

1 个答案: