How do I force/enable vertical scrolling in this html5/css3 page?


Tags: jquery,html5,css3

Problem :

[ redacted ] is the sample I'm monkeying with.

[ redacted ] is the related css file.

It's just filler text and a sample image, but I'm new to this and don't know what I'm doing.

I want: The logo image and 3 color-animated links to be stationary in the top-left of the page. A blue bar to run horizontally across the page, underneath the logo+links. Content to flow in a liquid fashion (dynamic resizing?) Scrolling to work.

I'm having trouble with that last part. Through CSS witchcraft and negative margins, I can get it to look "right" on my 1280x1024 Chromium browser, but if I open it in firefox or change the resolution, the content overflows and there isn't a scrollbar with which to look at the rest of the content. I can't even use the [DOWN] key to scroll.

What am I doing wrong? How do I force the rest of the content to be displayed and navigable? Am I improperly implementing CSS?

Please advise.

EDIT: I was using position:fixed rather than position:absolute. Changing all of those references from fixed to absolute (and then revising the margins) worked beautifully.

The finished product is up at [ http://blasdev.heliohost.org/apx/about.html ].

Thanks, El Yobo!



Solution :

Styling the #content div with position:absolute rather than position:fixed will solve your scrolling issues, but you will need to tweak other things. Absolute position pulls the content completely out of the normal flow, so scrolling no longer works; a good example of CSS positioning is available on A List Apart.


    CSS Howto..

    How do I get this HTML canvas animation to appear on top of my image?

    How to use a defined property value as another property in pure CSS?

    How to arrange divs by css floats?

    How to play a video inside a logo

    how to change html content text

    using css

    How I can make nice looking matrix of buttons with bootstrap 3?

    How to align div elements while using css tables

    How to make arrows on both sides of a box using css [duplicate]

    How to keep CSS from render-blocking my website?

    Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to set css via jquery for preventing some action

    How to load external css in CakePHP?

    How to centre and make responsive a row of divs

    How to add arrow beside some links in CSS?

    How to make a double color single border using css?

    How to keep a diagonal running background animation without rotating the div?

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How do i make this nav 100% wide?

    How to Insert Images inside DIV in this case

    How set a page to maximum and minimum sizes via css

    How can I hide a div when content is not displayed

    How to base the height of a

    on whether or not its parent div has an image

    how to add/remove a class from a link

    How to do animation of using CSS and webkit

    How can I set a border in alignment with other borders

    How to 'append' the background with more styles in CSS?

    how to center a webpage in CSS

    How to remove rounded from to select query in jquery?

    How to apply padding to a column using and CSS in Firefox?