当我的代码中窗口高度降低时，页脚会向上移动，我该如何将其迫使其低于所有其他内容

Question

我在Google和stack-over-flow上查看了几个小时，他们的建议工作在他们的代码示例上工作，但由于某些原因，我无法让页脚在代码中保持在我的内容以下

i降低了页脚在内容上移动的窗户高度。无论窗口高度是否减小，我如何才能使其低于页面的所有内容？

代码示例

<style>
  body{
  color: white;
  font-family: raleway;
  background-color: black;
}
.nav-bar{
  background-color: black;
  height: 50px;
  width: 100vw;
  position: relative;
  bottom: 8px;
  right: 8px;
}
.nav-bar a{
  color: white;
  text-decoration: none;
}
.nav-bar #sign-up,#login{
  float: right;
  margin-left: 10px;
  margin-top: 15px;
}
.image-container{
  width: 100vw;
  height: 500px;
  background: url('http://www.dumpaday.com/wp-content/uploads/2017/10/photos-1-25.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
  position: relative;
  bottom: 8px;
  right: 8px;
}
.image-container .text-box{
  /*background-color: red;*/
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 175px;
  position: absolute;
  left: 0;
  right: 0;
}
.image-container .text-box #title-text{
  text-align: center;
}
.image-container .text-box h3{
  display: inline-block;
  border: 2px solid white;
  margin: 0;
  padding: 5px;
  border-radius: 5px;
}
.image-container .text-box #model-option{
  margin-right: 15px;
}
.image-container .options-container{
  padding: 5px;
  /*background-color: gold;*/
  width: 158px;
  margin-left: auto;
  margin-right: auto;
}
.intro-container{
 /*background-color: red;*/
}
.intro-container .text-box{
 /*background-color: gold;*/
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  word-break: break-all;
}
.intro-container .text-box #welcome-title{
  text-align: center;
}
.intro-container .text-box #details{
  text-align: center;
}
footer{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
color: white;
font-family: raleway;
 border-top: 1px solid white;
}
</style>
<div class='nav-bar'>
  <a id='sign-up' href='#'>Signup</a>
  <a id='login' href='#'>Login</a>
</div><!--</nav-bar>-->
<div class='image-container'>
  <div class='text-box'>
    <h1 id='title-text'>BlaBlablablabla</h1>
    
<div class='options-container'>
    <h3 id='model-option'>Model</h3>
    <h3 id='client-option'>Client</h3>
    </div><!--</options-container>-->
  
  </div><!--</text-box>-->
</div><!--</image-container>-->
<div class='intro-container'>
  <div class='text-box'>
  <h2 id='welcome-title'>Radom</h2>
    <p id='details'>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
  </div><!--<text-box>-->
</div><!--</intro-container>-->
<footer>Footer</footer>

Answer 1

使用位置：固定；而不是位置：绝对;

    position: fixed;

这将把它保留在您放置的位置。