/    Sign up×
Community /Pin to ProfileBookmark

Missing verticle scroll bar

Copy linkTweet thisAlerts:
Oct 29.2008

I’m new to this forum, so hello everyone! ?

The problem I’m having is I’ve put together a page with a footer at the bottom. I want the footer to always be visible because I feel it balances out the title bar at the top of the page visually. I’ve managed to do this by building it all into box with a CSS class that sets the box position to be fixed, and have a height of 100%. The footer is then stuck in a cell at the bottom. Hope that makes sense… The problem is that if the content is longer than the browser window, no scrollbar appears. This happens in IE7 and Firefox.
Anyway, I’m completely stumped.

Here’s the page:
[url]www.aqmdtesting.com[/url]

And here’s a stripped down version to make the code easier to look through:
[url]http://aqmdtesting.com/index_test7.html[/url]

If anyone can shed any light on this issue I would greatly appreciate it!

  • – Damon

    • to post a comment
    CSS

    2 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @damon00authorOct 29.2008 — I seem to have found a work-around. A very [B]hacky[/B] work around, but it does seem to be functioning. Although the scrollbar doesn't appear for the footer, if any other content goes off screen it does appear.

    Here's the page I fixed it on:

    http://aqmdtesting.com/Contact.html
    Copy linkTweet thisAlerts:
    @cbVisionOct 29.2008 — It sounds like you want your middle section to scroll, and the header and footer to stay in place. If that's the case, work with this as an example:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

    #head {width: 100%; height: 100px; background: #f00;}

    #main {width: 100%; overflow: scroll; height: 300px;}

    #footer {height: 100px; background: #0ff; width: 100%;}

    </style>

    </head>

    <body>

    <div id="head">

    </div>

    <div id="main">
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    <p>Test paragraph</p>
    </div>

    <div id="footer">
    test
    </div>
    </body>
    </html>
    ×

    Success!

    Help @damon00 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...