主要内容下的麻烦定位页脚

Question

I'm trying to create my website from scratch, and facing quite a few problems along the way.. The most recent problem being that I can't manage to get my footer positioned after the main-wrapper div. The most obvious reason why I'm encountering this problem is because main-wrapper contains elements which are absolutely positioned and so its height doesn't adjust accordingly. I searched all over the place before asking and I even implemented a clearfix to no result..

The page is here

I also created a Plunk with all the files here

Answer 1

what about adding this to your css #footer:

 position: absolute;
 width: 100%;
 bottom: 0;

( if you want the footer to get pushed down the page if there is more content in content, this want work )

Answer 2

Try this to your footer css style,

#globalfooter{
   position:absolute;
   bottom:0px; 
}

Answer 3

I think using css it will be very difficult, you can try using this script

 <script type="text/javascript">
    document.getElementsByClassName('main-wrapper')[0].style.height = document.getElementsByClassName('hero-bg')[0].offsetHeight+"px";
 </script>

put this just below of closing of "main-wrapper" section