Question

我有三个div。我想在页面底部有一个div。

abc

two是页面的标题。 three是页面上显示的文章。 three是页面的页脚。我希望页面底部有div three。如果我没有任何文章，那么two div必须显示在页面底部。there div将在那时为空。如果three有很多文章，那么我向下滚动到页面的末尾，那时它必须显示{{1}} div。请解释一下。提前谢谢你。

Answer 1

您可以使用flexbox很好地完成此操作。我在下面列举了两个例子。希望这有帮助！

以下是没有内容时页脚如何位于底部的演示：

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

#header {
  background: pink;
  height: 50px;
}

#footer {
  background: skyblue;
  height: 50px;
}

#articles {
  background: lightgreen;
  flex: auto;
}

<div class="container">
  <div id="header"></div>
  <div id="articles"></div>
  <div id="footer"></div>
</div>

这是一个具有相同风格的演示，展示了当内容足够时页脚被按下的方式：

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

#header {
  background: pink;
  height: 50px;
}

#footer {
  background: skyblue;
  height: 50px;
}

#articles {
  background: lightgreen;
  flex: auto;
}

span {
  display: block;
  font-size: 2em;
  margin: 1em 0;
}

<div class="container">
  <div id="header"></div>
  <div id="articles">
    <span>Article</span>
    <span>Article</span>
    <span>Article</span>
    <span>Article</span>
    <span>Article</span>
  </div>
  <div id="footer"></div>
</div>

Answer 2

请试一试。

body{
  position:relative;
  margin: 0;
}
#abc{
  background:#000;  
  height:50px;
}
#two{
  background:#ff0;
  height:50px;
}
#three{
  background:#ff0000;
  height:50px;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
}

<body>
<div id="abc">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>

Answer 3

为div“3”制作position: fixed

#two { 
height: 1000px;
}
#three { 
position:fixed;
bottom:0;
width:100%;
background: red;
color:white;
}

<div id="abc">Some text
</div>
<div id="two">Some text
</div>
<div id="three">Some text
</div>

如果有另一个div，如何在底部制作一个div？

3 个答案: