Header + Content + Footer. How to add bottom fixed form?

Hi,

I tried something but I wanted to know if there is easier/better way.
Basically, I added a sub-footer:

    <div class="bar bar-subfooter">
        <div class="list">
          <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <textarea placeholder="Comments"></textarea>
            </label>
            <button class="button button-small button-positive">
              Send
            </button>
          </div>
        </div>
      </div>

And I used the following css:

.subfooter-area .bar-subfooter {
    bottom: 81px !important; /* place bar-subfooter above footer */
}

.subfooter-area .has-tabs {
    bottom: 119px !important; /* place content end before sub-footer */
}

Note that subfooter-area is a class that I added to the container of the new form area. Full code is viewable here: http://cdpn.io/ijlvD

If you have any advises, please share.

Thanks,

Jon

1 Like