What is the recomended layout?

Hello friends, we need a fixed button at the bottom.
The button container must be transparent (here in the example it is white, but the background of our real app is an image and the container needs to be transparent). Since it cannot be transparent (in that case, we could see trough the page), we had to create a different layout like this:

bottom_button

Code:

<div class="page-content pageBIGBTN">
  <div class="pageWrapper">
    <div class="pageNormal">
    </div>
    <div class="BigBtnBottom">
      <a class="button button-big active">HELP</a>
    </div>
  </div>
</div>

The problem with this layout is that we have problems with keyboard, scrolls, etc. So my question is: What is, in your opinion, the optimal layout for this structure?
Thanks!

You button should be inside of page, not page-content:

<div class="page">
  <!-- button here -->
  <div class="BigBtnBottom">
      <a class="button button-big active">HELP</a>
  </div>
  <div class="page-content">...</div>
</div>
1 Like