时间戳

首页 > 解决方案 > 为什么我的页脚周围有一个空框？

html - 为什么我的页脚周围有一个空框？

问题描述

我试图在页面底部放置一个页脚，但最终在底部出现了不需要的空白。我该如何纠正？以下是我的 HTML 和 CSS：

body{
  min-height:100vh;
  position:relative;
}

.page-wrap{
  padding-bottom:50px;
}


footer{
  position:absolute;
  background-color:red;
  bottom:0;
  width:100%;
  height:50px;
}
  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div class="page-wrap">
        <nav>
          <h2>Header</h2>
        </nav>
        <main>
          <h2>Content</h2>
        </main>
      </div>
      <footer><h2>Footer</h2></footer>
    </body>
    </html>

我不确定是什么在创造它。

标签： htmlcssfooter

解决方案

只需添加下面提到的 CSS 代码。希望这对您有所帮助。

footer h2 { margin: 0; }

推荐阅读