0

I am currently helping a friend with a very simple, responsive 1-page site which can be viewed here.

If you drag your browser window down to about 450px in width or less, you will see that the layout changes which is correct. However, when you drag vertically to make the page shorter, the content in the middle gets hidden/covered.

I need for the text in the middle to always be visible, even if the user needs to scroll/swipe to see it. NOTE: It is the whole body that I would want to scroll, not just the content div.

In this image, you can see that the text is covered if the viewport isn't very tall:

enter image description here

On the div that contains the main content, I have tried setting height and min-height as well as using !important to no avail.

I must be missing something obvious. Any help is appreciated.

Matt Cashatt
  • 23,490
  • 28
  • 78
  • 111
  • I'd think about using a media query for viewport height; consider [this](http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height), for example. Also, "stategic"? – Aaron Miller Aug 27 '13 at 18:20
  • I'd also note that, in Firefox 17 ESR, the content overlies the bottom bar rather than being hidden behind it; you may wish to consider explicit z-index specifications in your CSS to prevent this. – Aaron Miller Aug 27 '13 at 18:21
  • @AaronMiller--Thanks, the z-index problem should be fixed now. – Matt Cashatt Aug 27 '13 at 18:28

2 Answers2

0

Set the div named "content" the style: "overflow-y: scroll;"

<div id="content" style="overflow-y: scroll;">
<!-- content -->
</div>
Rômulo Spier
  • 231
  • 1
  • 11
0
body {
overflow-y: scroll;
}

Updated to be the whole document.

Blynn
  • 1,411
  • 7
  • 27
  • 48
  • I am sorry, I should have been more clear. I want the whole body to scroll, not just the content div. I will edit my question. – Matt Cashatt Aug 27 '13 at 18:24
  • updated my answer please add below or modify any other body specific css. – Blynn Aug 27 '13 at 18:25
  • Thanks for your efforts, but this does not solve the problem of maintaining a consistent height in the content box. If I use your suggestion, the content div still collapses when I make the window shorter. I need for that content div to maintain a given `min-height` which would then force the scroll bar for the browser window on it's own. – Matt Cashatt Aug 27 '13 at 18:30