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

Question

嗨，我为此感到疯狂：

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

我无法为自己的生命解决这个问题。 我知道，如果将img浮动，则父div不会获得子元素的高度...想知道这是否是唯一的方法，或者是否有更好的方法来做。

任何帮助将非常感激！！！ TIA

 $(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(); }); 

 #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; } 

 <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>