Results 1 to 2 of 2

Thread: using overflow with dynamic height

  1. #1

    using overflow with dynamic height

    as you can see here, there are two div's, #main (green) and #bottom (red). I need red always to remain at the bottom of the user's screen, I don't want them to scroll past it. Ok that works. But the height of green will be based upon the content inside of it, which is different for each page. So if the user shrinks his browser far enough, much of the text in green becomes hidden. I figure overflow:auto would do the trick by adding vertical scrollbars if red overlaps green, but green's height is dynamic. Is there a way to overcome this?

  2. #2
    You'd most likely have to use some javascript to get it sized correctly. Especially for IE. Here's the CSS I would use:

    Code:
    	body {
    		background:#F90;
    		padding:0;
    		margin:0;
    		text-align:center;
    		}
      #container {
        height: 618px;
    		width: 412px;
        overflow: auto;
    		margin:0 auto;
      }
    	#main {
    		background:#00FF00;
    		width: 400px;
    		text-align:left;
    		margin:0 auto;
    		}
    	#bottom {
    		position:absolute;
    		bottom:0px;
    		left:50%;
    		margin:0 -205px;
    		width:400px;
    		height:250px;
    		background:#FF0000
    		}
    Then I'd write the divs like this:

    Code:
    <div id='container'>
      <div id="main">
      </div>
    </div>
    <div id="bottom"></div>
    The javascript would set the height: of #container on the load of the page, and page resize.

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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012