ratchet icon indicating copy to clipboard operation
ratchet copied to clipboard

Published 20 hours ago • verified publisher icon twbs

Bottom content hidden

Open eliteventure opened this issue 9 years ago • 2 comments

Using v2.0.2 and ios theme, the content at bottom of page is hidden behind the bottom nav bar (<nav class="bar bar-tab">). I will need to manually add enough padding to bottom of content as the height of the bottom nav bar to be able to scroll down enough.

image1

eliteventure avatar Jun 09 '15 13:06 eliteventure

@eliteventure Remember to put backticks (`) around HTML tags when posting them in GitHub issues; otherwise, nothing shows up.

cvrebert avatar Jun 16 '15 02:06 cvrebert

I had the same issue with the base CSS. The scroll bar would be covered by the header and footer plus the footer would cover the bottom content. I made two changes to get things to work but I cannot confirm these are generic solutions. Both changes are for the .bar-nav ~ .content class

  1. To get the scroll bar out of the header, change the padding-top to margin-top
  2. To push up the bottom of the page, the content div needs a height. I added height: calc(100% - 88px); to reduce the height of the center content area. I use a 44px header and a 44px footer. Adjust the 88px as needed.

These solutions are NOT universal and I haven't tested many layouts but hopefully you can hack something that works for you.

michaelkay avatar Sep 25 '15 16:09 michaelkay