Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS content overflows beyond browser viewport, cuts off 100% header/footer backgrounds

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34367
    krisbulman
    Member

    I feel like this has been posted before, but I cannot locate a solution.

    I am dealing with tons of tabular data in tables that spans off the page. This is fine, however in my fluid width layout, if tables expand beyond the browser viewport and a horizontal scroll bar gets created, then anything beyond the browser viewport becomes the background color.

    https://skitch.com/krisbulman/f3e1n/browser-viewport-bug

    ways around this?

    #87366
    clokey2k
    Participant

    You can ‘hack fix’ this by applying ‘display: table’ on the element containing the background. Not 100% sure it will work on ‘HTML’ or ‘BODY’ elements, not tried.

    Alternative methods could be to contain the table in a ‘div’ with ‘overflow: scroll’, on small screens only the table will scroll.

    #87485
    krisbulman
    Member

    You can see the problem I am experiencing even on this site when adding a hardcoded width value to the li element of any discussion.

    https://skitch.com/krisbulman/f344f/php-website-layout-css-tricks-forums

    horizontal scrollbars are disabled here, but if you press the right arrow, or use a trackpad to scroll right, you should be able to reproduce what you see in the screenshot.

    When there are 30+ columns, with 50+ rows of tabular data, overflow:scroll becomes a usability problem.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.