页脚图层未显示

我正在尝试在我的html页面中使用图层。显示页眉、anv、部分和旁页，但不显示页脚。

我已经检查并验证了 html 和 css。我以为有一个固定的高度不允许它，但事实并非如此，我不知道

.container {
  width: 80%;
  max-width: 1260px;
  min-width: 780px;
  margin: 0 auto;
}
header {
  background-color: #00FF00;
  width: 100%;
  height: 200px;
  font-size: 60px;
  text-align: center;
  font-family: monospace;
}
nav {
  background-color: #FFFF00;
  width: 20%;
  height: 768px;
  float: left;
  font-size: 30px;
}
section {
  background-color: #151B8D;
  width: 60%;
  height: 768px;
  float: left;
  font-size: 20px;
  text-align: center;
}
aside {
  background-color: #FFFF00;
  width: 20%;
  height: 768px;
  float: left;
  font-size: 30px;
}
footer {
  background-color: #00FF00;
  width: 100%;
  height: 200px;
  font-size: 100px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="" />
  <title><i>Test Layout</i></title>
</head>
<body>
  <div class=" container ">
    <header>
      <h1>Test Layout</h1>
    </header>
    <nav>
    </nav>
    <section>
    </section>
    <aside>
    </aside>
    <footer>
    </footer>
  </div>
</body>
</html>

我希望页脚显示，我知道这是一个基本问题，而且非常无聊的css。问题是我不知道这个问题，因为代码对我来说看起来是正确的。

使用 position: fixed; 和 bottom: 0;

.container {
  width: 80%;
  max-width: 1260px;
  min-width: 780px;
  margin: 0 auto;
}
header {
  background-color: #00FF00;
  width: 100%;
  height: 200px;
  font-size: 60px;
  text-align: center;
  font-family: monospace;
}
nav {
  background-color: #FFFF00;
  width: 20%;
  height: 768px;
  float: left;
  font-size: 30px;
}
section {
  background-color: #151B8D;
  width: 60%;
  height: 768px;
  float: left;
  font-size: 20px;
  text-align: center;
}
aside {
  background-color: #FFFF00;
  width: 20%;
  height: 768px;
  float: left;
  font-size: 30px;
}
footer {
    background-color: #00FF00;
    width: 100%;
    height: 50px;
    font-size: 100px;
    text-align: center;
    position: fixed;
    bottom: 0;
}

<div class="container">
  <header>
    <h1>Test Layout</h1>
  </header>
  <nav>
  </nav>
  <section>
  </section>
  <aside>
  </aside>
  <footer>
  </footer>
</div>

谢谢你们，由于某种原因，在 Firefox 或 IE 中它仍然不会显示，但是当我测试代码片段时它可以工作。编辑：我再次验证了它，它没有显示颜色，两个建议都很好并且效果很好

添加清除：左; 到页脚。这应该可以解决您的问题。

footer {
  background-color: #00FF00;
  width: 100%;
  height: 200px;
  font-size: 100px;
  text-align: center;
  clear: left;
}

其他部分具有 float：left，这意味着它们不会像您想要的那样向下推页脚。

您的页脚隐藏在其他部分后面，快速解决方法可能是将 float：left 也添加到页脚中

检查这个小提琴，例如它在哪里工作

footer {
background-color:#00FF00;
width:100%;
height:200px;
float:left;
font-size:100px;
text-align:center;
}

https://jsfiddle.net/rojzy94u/

我尊重所有答案，但问题是它隐藏在部分下，让它clear:both .它会起作用。

.container {
  width: 80%;
  max-width: 1260px;
  min-width: 780px;
  margin: 0 auto;
}
header {
  background-color: #00FF00;
  width: 100%;
  height: 200px;
  font-size: 60px;
  text-align: center;
  font-family: monospace;
}
nav {
  background-color: #FFFF00;
  width: 20%;
  height: 768px;
  float: left;
  font-size: 30px;
}
section {
  background-color: #151B8D;
  width: 60%;
  height: 768px;
  float: left;
  font-size: 20px;
  text-align: center;
}
aside {
  background-color: #FFFF00;
  width: 20%;
  height: 768px;
  float: left;
  font-size: 30px;
}
footer {
  background-color: #00FF00;
  width: 100%;
  height: 200px;
  font-size: 100px;
  text-align: center;
  clear: both;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="" />
  <title><i>Test Layout</i></title>
</head>
<body>
  <div class=" container ">
    <header>
      <h1>Test Layout</h1>
    </header>
    <nav>
    </nav>
    <section>
    </section>
    <aside>
    </aside>
    <footer>
    </footer>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：