Question

我正在尝试在div和header之间创建一个空的footer，因为我的网页上有一个background image我想要清除任何元素

完整代码为here

＆＃13;

* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
  background: url('http://placekitten.com/200/300') no-repeat fixed center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/*-------------- HEADER -----------------------*/

a {
  text-decoration: none;
  color: black;
}
#header h1 {
  font-family: "Frijole", cursive;
  float: left;
  padding-left: 20px;
}
#header ul {
  font-family: "Frijole", cursive;
  float: right;
  padding: 20px 20px 0 0;
  display: inline-block;
}
#header ul,
li {
  display: inline-block;
  margin-bottom: 5px;
}
/*-------------- EMPTY DIV -----------------------*/

#empty_div {
  height: 800px;
}
/*-------------- FOOTER -----------------------*/

#footer {
  clear: both;
  padding-left: 20px;
  text-align: center;
}
#footer p {
  margin: 5px 0;
}
.social_icon {
  display: inline;
  width: 1.25rem;
  height: 1.25;
  margin-right: 0.3215rem;
  margin-bottom: 0;
}

＆＃13;

<div id="header">

  <a href="index.html" id="logo">
    <h1 class="headings">THE 100 DAYS PROJECT</h1>

  </a>


  <nav>
    <ul>
      <li><a href="new_treehouse.html" class="selected">Portfolio</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>

    </ul>
  </nav>
</div>

<div id="empty_div">

</div>

<div id="footer">
  <a href="http://twitter.com/cilvako">
    <img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon">
  </a>
  <a href="http://facebook.com/">
    <img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon">
  </a>

  <p>&copy; 2016 Silvia Bogdan</p>

</div>

</body>

＆＃13;

我可以让空div显示并占据页面的整个height（因此它会在header和footer之间创建空格吗？< / p>

我设置了一个值（例如min-height: 800px），但在调整浏览器大小时（我尝试使用开发人员工具在不同的设备上显示），footer它放在了所有地方这个地方，从不在页面底部。

Answer 1

我认为这就是你想要做的。全屏打开以查看更好的结果。

#header{
  background: #ebebeb;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#footer{
  background: #dbdbdb;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

<body>
<div id="header">
  <h1>
  Header
  </h1>
</div>
<div id="footer">
  <h1>
  Footer
  </h1>
</div>
</body>

默认情况下，div的position为static。您需要将其设为absolute或fixed，然后添加top或left或bottom或right等属性，以便将元素准确放置在你想要的。

以下是一些链接，您可以在其中查看position: absolute;和position: fixed;之间的区别。

http://www.w3schools.com/cssref/pr_class_position.asp http://www.w3schools.com/css/css_positioning.asp

我希望这会有所帮助。

Answer 2

正如我在评论中已经建议的那样，你最好不要尝试使用元素来定义或操纵另一个元素的行为。

因此，在您的情况下，您可能想知道如何使页脚粘贴到页面底部，而您的内容会占用页眉和页脚之间的所有剩余空间。

当然有几种方法，基本方法可能如下：

<div id="header">
   Some content here..
</div>

<div id="content">
   Your content here...
</div>

<div id="footer">
   Some stuff here..
</div>

用这样的css：

#header {
  height: 100px;
  width: 100%;
  background: red;
}

#content {
    display: table;
    position: absolute;
    top: 100px;
    bottom: 50px;
    width: 100%;
    padding-bottom: 50px;
    background: green;
}

#footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: blue;
}

如您所见，对于此示例，标题没有任何特殊之处。它会占据页面顶部的100px并延伸到100% width。

页脚设置为position: fixed位于底部（bottom: 0 or 0px），占据50px高度并延伸其父容器的100% width（在我们的例子中，它是我们的体）。

有点特别的是我们的div #content。首先，我们将absolute置于top（我们的#header的高度）并使其占用所有width。

然后我们必须涵盖几种情况：

第一种情况：我们的#content中没有实际内容。为了使div伸展到底部直到它到达页脚，我们必须设置bottom: 50px。
第二种情况：我们看到的内容占用的空间更多：如果是这种情况，只要向下滚动背景就不会再填充（在我们的例子中为绿色），因为这样，我们添加display: table以使我们的div将其尺寸始终拉伸到其内部内容的相同高度（例如我们的文本）。

最后，因为我们的#footer位于fixed并且位于#content，我们必须将padding-bottom: 50px添加到#content。

以下是此示例的Fiddle。

Answer 3

您可以使用flexbox执行您想要的操作，因此您无需使用height / header中的固定footer，甚至中间div #empty_div

我还调了一下你的代码。

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  margin: 0
}
html {
  font-size: 14px;
  /* changed for demo */
  background: url('http://placekitten.com/200/300') no-repeat fixed center;
  background-size: cover
}
#wrap {
  display: flex;
  flex-direction: column;
  height: 100%
}
a {
  text-decoration: none;
  color: black;
}
/*-------------- HEADER -----------------------*/

#header {
  display: flex;
  font-family: "Frijole", cursive;
}
#header h1 {
  padding-left: 20px
}
#header nav {
  margin-left: auto
}
#header ul {
  padding: 20px 20px 0 0;
}
#header li {
  display: inline-block;
  margin-bottom: 5px
}
/*-------------- EMPTY DIV -----------------------*/

#empty_div {
  flex: 1;
  background: red
}
/*-------------- FOOTER -----------------------*/

#footer {
  text-align: center
}
#footer p {
  margin: 5px 0
}
.social_icon {
  display: inline;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0.3215rem 0 0
}

＆＃13;

<div id="wrap">
  <div id="header">
    <a href="index.html" id="logo">
      <h1 class="headings">THE 100 DAYS PROJECT</h1>
    </a>
    <nav>
      <ul>
        <li><a href="new_treehouse.html" class="selected">Portfolio</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
  <div id="empty_div"></div>
  <div id="footer">
    <a href="http://twitter.com/cilvako">
      <img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon">
    </a>
    <a href="http://facebook.com/">
      <img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon">
    </a>
    <p>&copy; 2016 Silvia Bogdan</p>
  </div>
</div>

＆＃13;

如果您不想/需要中间div，您仍然可以像这样使用flexbox：

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  margin: 0
}
html {
  font-size: 14px;
  /* changed for demo */
  background: url('http://placekitten.com/200/300') no-repeat fixed center;
  background-size: cover
}
#wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%
}
a {
  text-decoration: none;
  color: black;
}
/*-------------- HEADER -----------------------*/

#header {
  display: flex;
  font-family: "Frijole", cursive;
  background: rgba(255, 255, 0, .7)
}
#header h1 {
  padding-left: 20px
}
#header nav {
  margin-left: auto
}
#header ul {
  padding: 20px 20px 0 0;
}
#header li {
  display: inline-block;
  margin-bottom: 5px
}
/*-------------- FOOTER -----------------------*/

#footer {
  text-align: center;
  background: rgba(255, 255, 0, .7)
}
#footer p {
  margin: 5px 0
}
.social_icon {
  display: inline;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0.3215rem 0 0
}

＆＃13;

<div id="wrap">
  <div id="header">
    <a href="index.html" id="logo">
      <h1 class="headings">THE 100 DAYS PROJECT</h1>
    </a>
    <nav>
      <ul>
        <li><a href="new_treehouse.html" class="selected">Portfolio</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
  <div id="footer">
    <a href="http://twitter.com/cilvako">
      <img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon">
    </a>
    <a href="http://facebook.com/">
      <img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon">
    </a>
    <p>&copy; 2016 Silvia Bogdan</p>
  </div>
</div>

＆＃13;

Answer 4

你只需要给头部元素一个高度，因为你没有给它任何高度，它认为它的高度为0，所以它不会推动空的div，所以你看到重叠

只需将此输入到标题下的css中，它就能正常工作。

#header { height:100px; }

如何在页眉和页脚之间显示空div？

4 个答案: