Forums | MacLife

I'm with Miles.

But if you really want to, the only thing I know is to assign a height to the div, then give it a overflow:auto rule in the stylesheet. But then you'd either have to live with the fixed height or use Javascript to calculate the page size, and...


... really, I'm with Miles on this one.

If you position the div fixed or abosolutely; use right, left, and top to define the size of the div; and give it a bottom of 0, with overflow auto, it will have a scrollbar just for the div.  Top can be in percentages.  The div will always go to the bottom though, if you need the expansion.  For expansion, create a div within that div that has the background styling and all the content.  example

registered_user wrote:

here's an example of what I think you're trying to do:

http://www.casefoundation.org/about/news

and I must say, I absolutely hate using that site.  It's not as bad with a scroll wheel, but without one, it's tragic enough that I leave quickly.

That's a fixed height div and he wants an expanding one.

Thanks for the responses. I've uploaded what I have so far to give you a better idea of what I'm trying to do, and why I want a scrolling div as opposed to a scrolling page. Link.

Thanks again!
_Nik

Not sure how to do what you need (I am on a deadline) but have you looked here to see if there is a solution?
http://glish.com/css/#techniques

I'm with stupid wrote:

I'm with Miles.

Tell me someone else is laughing. Please.

Basseq wrote:

I'm with stupid wrote:

I'm with Miles.

Tell me someone else is laughing. Please.

oh now I get it!!!

Here's what I'd do. I've done this tons in the past and it works beautifully. It's workaroundish, but currently CSS has no way of doing this except by height:100%;, which really doesn't let you say "I want this div to be 100 pixels shorter than the window all the time."

<div id=theDiv style="position:absolute; left:-5000px; top:100px; width:500px; height:0px; overflow:auto;">
lots of stuff here!
</div>

Up in the header, put...

<script>
function bodyWasResized() {
    var it = document.getElementById("theDiv");

    it.style.height = (windowHeight() - 100) + "px";
   
    var divWidth = parseInt(it.style.width);
    it.style.left = (  (windowWidth()-divWidth)/2  ) + "px";
   
    //this code will run every time the user resizes the window.
}

function bodyJustFinishedLoading() {
    bodyWasResized();
    //this code will run when the page loads; put whatever you want here!
}



//don't worry about these; they're just functions that reliably return
//the width and height of the window in all possible ways to account
//for all the different ways modern browsers implement JavaScript.
//You can pretty much ignore these, but for the above code to work...
//they have to be there.
function windowWidth() {
    return f_filterResults (
        window.innerWidth ? window.innerWidth : 0,
        document.documentElement ? document.documentElement.clientWidth : 0,
        document.body ? document.body.clientWidth : 0
    );
}
function windowHeight() {
    return f_filterResults (
        window.innerHeight ? window.innerHeight : 0,
        document.documentElement ? document.documentElement.clientHeight : 0,
        document.body ? document.body.clientHeight : 0
    );
}
function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
</script>

In the body tag, put...
     onload="bodyJustFinishedLoading();" onresize="bodyWasResized();"  along with whatever other attributes you may or may not have.

Last edited by chuckaeronut (2006-10-29 3:05 pm)

You can have a fixed space above the div with just CSS.  This example is like yours (chuckaeronut), but with CSS, and no fixed-width content area.  I'm not shure how to fix the width and still make it work.

By the looks of it, you really don't need an expanding div. Secondly, a column that wide, if you're planning to fill it with text from left to right, is going to be very onerous for your users unless you're using 26 pt type. Add to that the exhaustion of secondary scrolling for a div that tall...