Html 两个连续相对位置不正常

我在img集团写了一个包含照片墙的内容。我使用引导的方法。然后我写了一个页脚。但是页脚不正常

我的图像包装是相对的，页脚是相对的。Img组是绝对的。我再次回顾了职位教程，但我不知道如何处理这个问题。我要去帮忙

我的html：

    <div id="content">
     <div class="rwrapper">
        <div class="container">
            <h1 class="margintop text-center">Popular Activities</h1>
        </div>
        <div class="img-group">
            <a id="pic1" class="line1" href="activity-single.php?act_id=4">test</a>
            <a id="pic2" class="line1" href="activity-single.php?act_id=12">test2</a>
            <a id="pic3" class="line1" href="activity-single.php?act_id=26">test3</a>
            <a id="pic4" class="line2" href="activity-single.php?act_id=27">test4</a>
            <a id="pic5" class="line2" href="activity-single.php?act_id=31">test5</a>
            <a id="pic6" class="line2" href="activity-single.php?act_id=43">test6</a>
            <a id="pic7" class="line3" href="activity-single.php?act_id=6">test7</a>
            <a id="pic8" class="line3" href="activity-single.php?act_id=5">test8</a>
            <a id="pic9" class="line3" href="activity-single.php?act_id=1">test9</a>
        </div>              
    </div>
</div>
<div class="clearfix"></div>
<div id="footer" class="index">
    <div class="container">
        <div class="wrapper">
            <ul class="list-inline">
                <li><a href=""><i class="fa fa-facebook-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-google-plus-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-twitter-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-pinterest-square fa-3x"></i></a></li>
            </ul>
            <p class="h5 text-center">copyright © 2015 Sports Buddy Group.</p>
        </div>

    </div>  
</div>  

---

绝对定位的图元不会影响其容器的高度，因为它们已从正常的图元流中移除。看见所以，我想你有两个选择。第一，给你的rapper类增加一个高度。像

.rwrapper{
    position: relative;
    height: 300px; /* <- insert the height you need here
}

.rwraper{
位置：相对位置；
高度：300px；/*抱歉~因为我有太多的外部因素。我的网站有一个在线版本：。页脚不正常==页脚在测试网站上看起来很好，因为它出现在平铺图像下面。这有什么不对？看起来很好，因为我在页脚上写了一个静态边距。但是如果你在手机上查看或者ipad，这将是不正常的。非常感谢您的回复~但正如您所猜测的，我尝试创建一个响应性强的网站，因此可能无法设置高度。当我将所有内容切换到“相对”时，它仍然不起作用==页脚正在向上移动并漂浮在图像组上方。
.rwrapper{
    position: relative;
    height: 300px; /* <- insert the height you need here
}