Question

我正在尝试创建页脚，但是每当我在Chrome上打开控制台视图时，该页脚都会随控制台一起出现。我看过很多其他人也遇到同样的问题，但是他们通过将页脚的位置设置为固定或绝对来解决了这个问题，但是当我尝试两者时，我仍然得到相同的结果。

我看过的线程： Footer goes up whenever i open Chrome Console How do you get the footer to stay at the bottom of a Web page?

这是我的CSS当前的样子：

time = '#mid(string,9,2)-8#:#mid(string,11,2)#'

这是我的HTML：

html, body {
    height: 100%;
    min-height: 100%;
}

.footer {
    width: 100%;
    bottom: 0px;
    left: 0px;
    height: 100px;
    position: fixed;
    background-color: #727272;
}

.footer p {
    color: white;
}

<body> <div class="footer"> <div class="wrapper"> <p>testing</p> </div> </div> </body>类仅在左右两侧创建边距。

Answer 1

以下是使用示例来使页脚始终保持不放的方式，而无需使用position:fixed：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
.main {
  flex-grow: 1;  
}

.footer {
  flex-grow: 0;
  background-color: #727272;
}

.footer p {
  color: white;
}

<body>
  <div class="main">
    put your content here...
  </div>
  <div class="footer">
    <div class="wrapper">
      <p>testing</p>

    </div>
  </div>
</body>

在语义上正确的完整布局应为：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex-grow: 0;
}

main {
  flex-grow: 1;
}

<html>
  <head></head>
  <body>
    <header>
      Your header here
    </header>
    <main>
      Your content here
    </main>
    <footer>
      Your footer here
    </footer>
  </body>
</html>

<footer>和<header>将占用他们需要的空间，但不会更多。 <main>在剩余空间中增长。当<main>需要的空间超出可用空间时，它将<footer>下推。

页脚随开发控制台视图一起出现

1 个答案: