Div to Fill Extra Space via jQuery?

1

Any suggestion on a script that would fill the extra space of a div?

My ultimate goal would be to have this div (the one that should fill the extra space) to push down the div below it so it’s aligned to the bottom.

Below is a visual reference of what I’m trying to do.

I’m using the following Bootstrap panels markup.

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">
      Panel footer
  </div>
</div>
2

Why do you need jQuery to do this? Why not absolute positioning?

3

I went with a combo of suggestions, ultimately all using CSS over jQuery.

Although, I could see a script like this coming in handy.

4

It would be helpful for others searching if you could post your fix.

5

@Foxaii, sure thing.

From my original markup, on the class .panel-footer I added the following:

position: absolute;
bottom: 36px;

I haven’t worked out the mobile styling yet but I plan on removing position: absolute; since the spacing doesn’t have to match across panels. They’ll just auto height depending on the text they have.

1 Like
6

What is the 36px relative to?

You could also do something like this.

.panel {
   position: relative;
   min-height: 100px; /* or whatever you need */
   padding-bottom: 30px; /* height of panel-footer */
}

.panel-footer {
   position: absolute;
   bottom: 0;
}

This way the panel footer is always aligned to bottom.

7

It’s relative to the bottom of the div including the visual padding that should be on the bottom of the button. It’s working out nicely now.

Regarding mobile, I’ve adjusted the position / bottom selector with @media queries.