0

I am struggling with an issue I can't seem so solve by myself. Perhaps you can shed some light on it. The issue is concerning a responsive website using Bootstrap 3.

The issue

The main content is horizontally and vertically centered. The header with navigation is fixed to the top and the footer is fixed to the bottom of the page. Perfect! Check http://www.domains.cloudlabz.nl in a desktop browser for a working example.

The problem occurs when the main content gets too high. The header and footer do what they're supposed to do: stick to the top and bottom. But when the main content gets high, that's - in my case - unwanted. Check http://domains.cloudlabz.nl/domains.php to see what happens or decrease the height of your browser window.

You'll see the header and footer overlapping the main content. That's a no-no for me.

What I would like

I would like the header and footer to stick to the top and bottom of the page like they do now, but when the main content gets (too) high I would like the header and footer to scroll with the main content. Like if they're stacked on top of each other.

Best regards, Peter de Leeuw

  • CSS or JavaScript? BTW, I love the tags – afaolek Aug 01 '14 at 18:06
  • I just tried the RWD tool on Firefox. The website is fine. It works as you want it to. Obviously you want the website to work on smaller screens, it will. RWD is not the user resizing a desktop browser to the size of a phone's screen. Bootstrap takes care of what you want. – afaolek Aug 01 '14 at 18:11
  • @afaolek Thanks The responsiveness works correctly yes. But when you open http://domains.cloudlabz.nl/domains.php in a normal desktop browser you'll see the overlap of elements. This should not happen. –  Aug 01 '14 at 18:20
  • I haven't checked your HTML and CSS but I see you made the backgrounds for both transparent. Well, that is what you want but I hope you are aware of the implications. – afaolek Aug 01 '14 at 18:26
  • You can a `margin-top` of the same value as the height of your header to the table. That should do it, hopefully. You can also check the HTML of the Bootstrap documentation. – afaolek Aug 01 '14 at 18:28
  • I just tried a `margin-top: 50px;` for `
    `. Seems okay.
     – afaolek Aug 01 '14 at 18:32
  • Unfortunately I can't get it to work. Now I am rebuilding the page from the ground-up. Instead of using position: fixed I will try something else. Thanks for the help anyway! –  Aug 03 '14 at 13:25

0 Answers0