Results 1 to 4 of 4

Thread: fluid div height problem

  1. #1
    Join Date
    Jul 2007

    fluid div height problem


    I am havaing problems with creating the CSS for my wesbite.

    What I wish to do is to have a sidebar on the left and main content on thr right. I wish for the main content to be scrollable, but not the page to be scrollable, just the main content to be scrollable.

    At the moment I have the sidebar and content div's with a specified height. Obviously this is a problem because screen of 1280x1024 have an inch and half gao at the bottom of the page, whilst on a smaller screen the user has to scroll the page to see the bottom of te main section whcih is scrollable.

    What I currently have can be found here; www.tuxedup.com.

    How can I have the height of the #content change depending on various resolutions so that the only scrolling is for the scrolling div and not the entire page?

    Any ideas, I have looked through google and I am am not sure if I have found anything suitable, all I can find are java script solutions, and not CSS.

    Is the solutions to this problem possible with just css?

    Any help that ou can give is greatly appreciated.

    The address again is www.tuxedup.com

  2. #2
    Join Date
    Mar 2005
    Have you tried giving the height a % attribute instead of a fixed px?

  3. #3
    Join Date
    Nov 2003
    Jerryville, Tejas
    Start with html, body { height: 100% } and go from there.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Jul 2007
    No matter what I seem to do I cannot get it to work. If I use height:###% then it does nothing, not matter what percent I use for a div height, it still just shows up as the full height of the div and the entire page scrolls, not the div.

    I am still very new to CSS and I am learning as I go along.

    All I wish to do is to have the page fit to what ever avaiable space he browser offers without having the entire page scroll, just the content div should sroll, all else should remain static. The fixed heights solve this, but as I said before, depending on the resolution of the screen then the sometimes the scrolling div istaller than the available space, or much shorter. Ideally I would lik the div to use all of the available viewable space the browsers offers after the initial header image, but withut the page having to scroll, just the content div.

    Thanks for the help so far its appreciated


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center