页脚不位于页面底部，内容div高度为0

Question

嗨，我对此感到疯狂：

内容div高度为0，因此页脚不在页面底部。它最终位于标题div的正下方。

我不能为我的生活弄清楚这一点。我知道如果img的浮动，父div不会得到子元素的高度......想知道这是否是唯一的方法，或者是否有更好的方法来做到这一点。

任何帮助将不胜感激!!! TIA

＆＃13;

＆＃13;

$(document).ready(function() {
  var i = 0;

  function slideshow() {
    if (i == 0) {
      $("#splash1").fadeIn(5000, function() {
        setTimeout(function() {
          $("#splash2").fadeIn(5000);
          $("#splash1").fadeOut(5000);
        }, 2000);
        i++;
        slideshow();
      });
    } else if (i == 1) {
      $("#splash2").fadeIn(5000, function() {
        setTimeout(function() {
          $("#splash3").fadeIn(5000);
          $("#splash2").fadeOut(5000);
        }, 2000);
        i++;
        slideshow();
      });
    } else if (i == 2) {
      $("#splash3").fadeIn(5000, function() {
        setTimeout(function() {
          $("#splash1").fadeIn(5000);
          $("#splash3").fadeOut(5000);
        }, 2000);
        i = 0;
        slideshow();
      });

    }
  }

  slideshow();

});

＆＃13;

#wrapper {
  position: relative;
  height: auto;
  width: 100%;
  display: inline-block;
}

#header {
  width: 100%;
  height: 150px;
  min-width: 1080px;
}

#content {
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
}

#footer {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  position: absolute;
  bottom: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <img id="splash1" src="assets/img/background_splash1.jpg" style='width:100%;height:auto; position: absolute;' />
    <img id="splash2" src="assets/img/background_splash2.jpg" style='width:100%;height:auto; display:none; position: absolute;' />
    <img id="splash3" src="assets/img/background_splash3.jpg" style='width:100%;height:auto; display:none; position: absolute;' />
  </div>

  <div id="footer"></div>

</div>

＆＃13;

＆＃13;

＆＃13;