底部始终（非粘性）页脚使用不同的窗口大小

Question

我正在处理一个始终位于页面底部的页脚但是不粘。这是需求它会有所回应。目前它仅在底部有两种情况：首先我将底部属性设置为-350px（底部：0px导致我的页脚位于页面中间某处）或第二次当我手动更改它的窗口大小时（就像你一样）可能会注意到我正在使用Bootstrap）。 因为我想在将来设置一个动态图库（当你向下滚动时  将出现更多图像）我试图使用JQuery来处理这个问题但是...它似乎有一些我看不到的错误。我该怎么办？

nav {
  margin-bottom: -10px;
  margin-top: 0px;
  width: 100%;
  height: 80px;
  display: inline-block;
  position: relative;
  z-index: 3;
  top: -75px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
  -moz-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
  -webkit-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
}

.sticky {
  position: fixed;
  top: 0;
}

section {
  background-color: rgb(242, 242, 242);
  width: 100%;
  height: 130px;
  padding-top: 10px;
  padding-bottom: 15px;
}

nav h2 {
  font-weight: 700;
  display: inline-block;
  padding-right: 15px;
  margin-left: 39px;
}

nav p {
  font-weight: bold;
  display: inline-block;
  letter-spacing: 2px;
}

nav p .yours {
  letter-spacing: 3px;
}

section ul li {
  list-style: none;
  display: inline-block;
  font-size: 12px;
  margin-right: 9px;
}

section ul li a {
  color: rgb(132, 132, 132);
  text-decoration: none;
}

section li a:hover {
  text-decoration: none;
  color: black;
}


/*#lorem{
      
      width:640px;
      height:500vh;
      font-size:14px;
      padding-top:50px;
      margin:0 auto 0;
    }
    */

.bg-grey {
  margin-top: 35px;
}

#their {
  display: block;
  /* padding-left: 10px;
        margin-left:40px;
        padding-right:500px;
        margin-bottom: 60px;
        padding-top:5px;
        padding-bottom:5px;*/
  width: 342px;
  height: 15px;
  background: rgb(242, 242, 242);
  position: relative;
  left: 250px;
  margin-bottom: 60px;
}

p {
  display: inline-block;
  padding-left: 22px;
  margin-top: 60px;
  padding-top: 10px;
  font-weight: bold;
}

#th p {
  margin-top: 30px;
}

#th p:first-of-type {
  margin-top: -20px;
}

.thumbnail {
  border: none;
  border-radius: 0;
  background: rgb(85, 102, 119);
  !important
}

#own {
  position: absolute;
  top: -100px;
  padding: 20px 102px;
  margin-right: -190px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
}

#own:hover {
  /*background:rgba(255, 196, 0, 0.18); */
  background: rgba(244, 97, 19, 0.72);
  color: black;
}

#th {
  /*
       display: block;
       position:relative;
       
        top:-70px;
        padding-top:20px;
        right:-10px;
        width:500px;
       
        height: 2000px;
     */
  display: block;
  position: absolute;
  top: 330px;
  left: 810px;
  margin-bottom: 30px;
}

#th input {
  margin-left: 15px;
}

footer {
  background-color: rgb(175, 175, 175);
  position: relative;
  width: 100%;
  height: 80px;
  /*bottom:-350px;*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</section>

<nav>
  <h2>TRAVEL MOOD</h2>
  <p><span class="yours">what</span> is <span class="yours">your's ?</span></p>
</nav>

<div class="container-fluid all">
  <div class="container-fluid">
    <div class="row">
      <p class="to_know">GET TO KNOW THEIR STORIES</p>
      <div id="their"></div>
    </div>
  </div>
  <div class="container-fluid  bg-grey" id="portfolio">
    <div class="row text-center">
      <div class="col-md-2">
        <div class="thumbnail">
          <img src="china.jpeg" alt="china" class="img-responsive">
          <p>Donald & Ronald</p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <img src="tatry.jpeg" alt="tatry" class="img-responsive">
          <p>Louis</p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <img src="vienna.jpeg" alt="vienna" class="img-responsive">
          <p>Alejandra</p>
        </div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-2">
        <div class="thumbnail">
          <img src="croatia.jpeg" alt="croatia" class="img-responsive">
          <p>Marlene & Rita</p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <img src="almostcolorado.jpeg" alt="almostcolorado" class="img-responsive">
          <p>X & Y </p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="thumbnail">
          <img src="country.jpeg" alt="county" class="img-responsive">
          <p>Mr Doe & Mrs Doe</p>
        </div>
      </div>
    </div>
    <form id="th">
      <div class="form-group row">
        <div class="col-md-6">
          <button type="submit" class="btn btn-sm active" id="own">CREATE YOUR OWN !</button>
        </div>
      </div>
      <p>WEATHER</p><br>
      <input type="radio" name="weather" value="no_matter" checked> no matter<br>
      <input type="radio" name="weather" value="warmer"> warmer<br>
      <input type="radio" name="weather" value="colder"> colder<br>
      <input type="radio" name="weather" value="the_same"> the same<br>
      <p>COMPANY</p><br>
      <input type="radio" name="company" value="some_time_alone" checked> no matter<br>
      <input type="radio" name="company" value="couple"> couple<br>
      <input type="radio" name="company" value="with_family"> with family<br>
      <input type="radio" name="company" value="girls_boys_adventure"> girls/boys adventure<br>
      <p>HOW FAR</p><br>
      <input type="radio" name="location" value="another city" checked> another city<br>
      <input type="radio" name="location" value="another country"> another country<br>
      <input type="radio" name="location" value="another continent"> another continent<br>
      <p>PLACE WHERE YOU CAN</p><br>
      <input type="radio" name="activity" value="active"> stay active<br>
      <input type="radio" name="activity" value="leisure"> have some leisure time<br>
      <input type="radio" name="activity" value="party"> part..y/cipate<br>
      <input type="radio" name="activity" value="culture"> bite some culture<br>
    </form>
  </div>
  <footer></footer>
</div>

<div class="callout">
 <div class="large-8 medium-8 small-8 columns left">Demo</div>
 <div class="large-2 medium-2 small-2 columns right">
  <a href="#" class="deleteResource" data-id="1" data-name="Demo">
 <i class="fa fa-close red"></i> DELETE</a>
 </div>
</div>