Twitter Bootstrap Question posted in

Why the footer going on the accordion content when I expand it in this Twitter BootStrap page?

I am pretty new in Twitter BootStrap and I have the following problem that is drive me crazy.

You can see the problem in this JSFiddle: https://jsfiddle.net/AndreaNobili/uso4f4xk/

As you can see I have an accordion and a footer that have to be at the end of my page, this:

<div class="footerDiv">
    <div class="row footerRow">

        <p>FOOTER TEST</p>

    </div>
</div>

to put it at the botton of my page I am trying to use this CSS setting:

.footerDiv {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   
}

But it seems can’t work fine because when I expand a tab of my accordion the footer appear on the accordion content.

I have no idea about how to solve this situation. I am thinking to use JavaScriptJQuery to calculate the new page height when the user expand an accordion and set it again on the page content but I think that it is crazy (and I don’t know if it can work)

Why I obtain this behavior? How can I solve this issue?

Tnx

Tags:

2

Answers


  1. 0

    Just remove the bottom:0; property from the style of the class footerDiv. It will work. All the best

    Login or Signup to reply.
  2. 0

    position:absolute Replace by position:relative

    .footerDiv {
 position:relative;
 bottom:0;
 width:100%;
 height:60px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search