Question

我正在尝试在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>

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

Answer 1

其他部分的内容为float：left，这意味着它们不会像您希望的那样下压页脚。

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

检查此小提琴，例如其工作原理

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

https://jsfiddle.net/rojzy94u/

Answer 2

使用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>

Answer 3

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

Answer 4

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

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

Answer 5

我尊重所有答案，但问题是它隐藏在第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>

页脚层未显示

5 个答案: