Resize a DIV to fill entire height of page? Please help

01-25-2008

Im needing to resize a DIV tag to the entire height of the page. To
me, this doesnt seem like it should be very difficult, but alas, its
beating me. The content within the div may be tables, images, etc
dyanmic.

height: 100% doesnt work.

Is there javascript code I can add that will make the container DIV
the height of the page? (not viewport)

01-25-2008

ShutterMan wrote on 25 jan 2008 in comp.lang.javascript:

> Im needing to resize a DIV tag to the entire height of the page. To
> me, this doesnt seem like it should be very difficult, but alas, its
> beating me. The content within the div may be tables, images, etc
> dyanmic.
>
> height: 100% doesnt work.
>
> Is there javascript code I can add that will make the container DIV
> the height of the page? (not viewport)

what is a viewport in html?

<body style='padding:0;margin:0;'>
<div>
</div>
</body>

will do.

No JS needed.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

01-25-2008

Randy Webb wrote on 25 jan 2008 in comp.lang.javascript:

> Evertjan. said the following on 1/25/2008 4:02 AM:
>> ShutterMan wrote on 25 jan 2008 in comp.lang.javascript:
>>
>>> Im needing to resize a DIV tag to the entire height of the page. To
>>> me, this doesnt seem like it should be very difficult, but alas, its
>>> beating me. The content within the div may be tables, images, etc
>>> dyanmic.
>>>
>>> height: 100% doesnt work.
>>>
>>> Is there javascript code I can add that will make the container DIV
>>> the height of the page? (not viewport)
>>
>> what is a viewport in html?
>>
>> <body style='padding:0;margin:0;'>
>> <div>
>> </div>
>> </body>
>>
>> will do.
>>
>> No JS needed.
>>
>
> That doesn't make the div the same height as the page

It does.

> if you have other

There is always an if, but my above code is correct.

> elements in the page:
>
> <div>Div 1</div>
> <div>Div 2</div>
> <div>The first div is only one line high</div>
> <div>The OP wants the first div to be the
> same height as the entire page</div>
> <div>Probably to do a column type menu layout</div>

Guessing what the OP ment seems not very usefull,
when the OP is avialable to tell him/herself.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

01-25-2008

Thanks, but I need javascript code that will resize the DIV to the
height of the page. See, I dynamically add stuff inside a div. The
layout is more like:

<body>
<div id="containter">
<div id="dyanmic">
</div>
</div>
</body>

Where "container" has a repeating image in the background. The
problem is, body is set to 100%, the container is set to 100%. Only
works if I set container's height to an actual set value. HTML doesnt
seem to want to help me in this, as when I set container to 100%, its
too small. Only when I set it to an actual pixel size can I see the
div. And with dynamic stuff within it, its usually the wrong size.
Setting body to a pixel size doesnt work. Hence the request for doing
this in javascript.

01-25-2008

ShutterMan wrote on 25 jan 2008 in comp.lang.javascript:

> Thanks,

Thanks who, what?

[please always quote on usenet]

> but I need javascript code that will resize the DIV to the
> height of the page. See, I dynamically add stuff inside a div. The
> layout is more like:
>
> <body>
> <div id="containter">
> <div id="dyanmic">
> </div>
> </div>
> </body>
>
> Where "container" has a repeating image in the background. The
> problem is, body is set to 100%, the container is set to 100%.

The body always is 100%, because there is no other reference.

> Only
> works if I set container's height to an actual set value. HTML doesnt
> seem to want to help me in this, as when I set container to 100%, its
> too small.

That is not HTML but CSS.

> Only when I set it to an actual pixel size can I see the
> div. And with dynamic stuff within it, its usually the wrong size.

But what size would you want it to be?

100% of what?

Perhaps you want it to be 100% of the browser window?

The browser inner window is not checked by CSS,
it s quite possible to have a div the zize of that,
would it need to be resized on the user resizing the window?

> Setting body to a pixel size doesnt work.

Depending on what work you wish, yes it can.

> Hence the request for doing this in javascript.

Read on here for Browser Window Size:
<http://www.javascripter.net/faq/browserw.htm>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

01-25-2008

ShutterMan wrote:
> Thanks

For what?

http://www.jibbering.com/faq/faq_not...s.html#ps1Post

> but I need javascript code that will resize the DIV to the height of the page.

The "page" has no fixed height. There are no Web pages, unless you print
them out or make a presentation of them, BTW. These are (X)HTML documents.

> See, I dynamically add stuff inside a div. The layout is more like:
>
> <body>
> <div id="containter">
> <div id="dyanmic">
> </div>
> </div>
> </body>
>
> Where "container" has a repeating image in the background. The
> problem is, body is set to 100%, the container is set to 100%. Only
> works if I set container's height to an actual set value.

Then you are doing something else wrong. div[id="container"] here is always
as high as the document body is. If you are referring to the viewport
instead, you have to use absolute positioning.

> HTML doesnt seem to want to help me in this,

Of course not, HTML is a markup language.

> as when I set container to 100%, its too small.

100% of the height of the document body is, well, the height of the document
body. It is not the height of the viewport.

> Only when I set it to an actual pixel size can I see the div.

That's unlikely, but YMMV.

> And with dynamic stuff within it, its usually the wrong size.

Wrong according to what?

> Setting body to a pixel size doesnt work.

Then you are doing something else wrong. Anyway, even though you attempt to
set the CSS properties with client-side scripting, this is not a script
problem (and so OT here) as long as you don't show some code that you deem
to be erroneous.

> Hence the request for doing this in javascript.

In almost all cases you can only do with the DOM (the API; not J[ava]Script,
the programming language) what the user agent already supports. This is
such a case.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$>

01-25-2008

On Jan 26, 4:44*am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
[...]
> Read on here for Browser Window Size:
> <http://www.javascripter.net/...>

That seems to be a very old resource that relies on browser sniffing,
the FAQ provides better advice:

<URL: http://www.jibbering.com/faq/#FAQ4_9 >

--
Rob

01-26-2008

Not sure here why this question isn't being understood. And btw,
"thanks" means everyone who replied - seems thats rather obvious, but
ok...

Very simply... how can I make a div tag that has a repeating image,
automatically extend to the size of ALL content within that DIV
(including images)?

Based on the information posted already, HTML/CSS doesnt want to do
this, and anything contained in the DIV ends up bleeding over it, or
if I set overflow to scroll or hidden, it will do that - but it wont
extend the div. The content is dynamic, so I have no idea how big to
set it manually. Richard says Im offtopic here, but Im not- Im asking
how to use javascript to get the div tag to resize to it's content, if
thats possible.

01-26-2008

ShutterMan wrote:
> Very simply... how can I make a div tag

_Element_, not tag. Elements consist of a start tag, optional content, and
optional end tag.

> that has a repeating image, automatically extend to the size of ALL
> content within that DIV (including images)?

<div style="background-image: url(...)">
content
</div>

> Based on the information posted already, HTML/CSS doesnt want to do this,

Yes, it does. It's actually the default rendering behavior.

> and anything contained in the DIV ends up bleeding over it,

Then what is contained was taken out of the normal element flow with
absolute positioning.

> or if I set overflow to scroll or hidden, it will do that - but it wont
> extend the div.

That is the very nature of absolute positioning.

http://www.w3.org/TR/CSS21/

> The content is dynamic, so I have no idea how big to set it manually.

You don't have to do that in the first place.

> Richard says Im offtopic here, but Im not-

Yes, you are. This is basically an HTML/CSS question.

> Im asking how to use javascript to get the div tag to resize to it's
> content,

You don't have to.

> if thats possible.

It is possible, but understand that it would be unreliable overkill that you
don't want here.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

01-26-2008

On Jan 26, 4:04 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> ShutterMan wrote:
> > Very simply... how can I make a div tag
>
> _Element_, not tag. Elements consist of a start tag, optional content, and
> optional end tag.

No, I meant a DIV tag. Is this grade school?

> > that has a repeating image, automatically extend to the size of ALL
> > content within that DIV (including images)?
>
> <div style="background-image: url(...)">
> content
> </div>
>
> > Based on the information posted already, HTML/CSS doesnt want to do this,
>
> Yes, it does. It's actually the default rendering behavior.

No, it doesn't. Hence my question.

> > and anything contained in the DIV ends up bleeding over it,
>
> Then what is contained was taken out of the normal element flow with
> absolute positioning.
>
> > or if I set overflow to scroll or hidden, it will do that - but it wont
> > extend the div.
>
> That is the very nature of absolute positioning.
>
> http://www.w3.org/TR/CSS21/

www.disneyland.com

> > The content is dynamic, so I have no idea how big to set it manually.
>
> You don't have to do that in the first place.

Um, yes I do. It's called dynamic for a reason.

> > Richard says Im offtopic here, but Im not-
>
> Yes, you are. This is basically an HTML/CSS question.
>
> > Im asking how to use javascript to get the div tag to resize to it's
> > content,
>
> You don't have to.

But I'd like to.

> > if thats possible.
>
> It is possible, but understand that it would be unreliable overkill that you
> don't want here.

I didn't ask if it was overkill, I asked it if could be done and how.
Don't respond if you don't want to help. Your response was 0% helpful,
and more of the trolling nature.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Div Height = Image height. help	muggslab	HTML	1	02-01-2010 07:41 PM
calculate amount of space required/resize div height	doug	Javascript	6	07-09-2008 04:05 PM
Resize inner DIV to fill up outer DIVs height in IE 6	ckirchho@directmedia.de	Javascript	1	08-14-2007 11:06 AM
child div blocks parent div, height problem...	HJ	HTML	5	09-01-2006 04:37 PM
How to tell height of div where height is not set?	Don Vaillancourt	Javascript	8	01-31-2005 11:32 AM