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

ShutterMan · Jan 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)

Evertjan. · Jan 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. · Jan 25, 2008

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

Evertjan. said the following on 1/25/2008 4:02 AM:

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.

ShutterMan · Jan 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.

Evertjan. · Jan 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>

Thomas 'PointedEars' Lahn · Jan 25, 2008

ShutterMan said:
Thanks

For what?

http://www.jibbering.com/faq/faq_notes/clj_posts.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

RobG · Jan 25, 2008

On Jan 26 said:
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 >

ShutterMan · Jan 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.

Thomas 'PointedEars' Lahn · Jan 26, 2008

ShutterMan said:
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

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

ShutterMan · Jan 26, 2008

_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?

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

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

No, it doesn't. Hence my question.

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

That is the very nature of absolute positioning.

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

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

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

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

You don't have to.

But I'd like to.

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.

ShutterMan · Jan 26, 2008

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

Oops, one more response to your troll... no, this is a javascript
question. I believe it was phrased such as:

"Im asking how to use javascript to get the div tag to resize to it's
content, if
thats possible. "

Evertjan. · Jan 26, 2008

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

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

Are you responding to a posting on usenet?

If so you should quote the part you are responding on.

The original posting may not be available in all news servers,
so Netiquette requires you quote.

The Magpie · Jan 26, 2008

ShutterMan said:
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)

First, not without some messing about. Second, CSS would be better and
you can do it. Remember that you want it the height of the document
page and CSS is inherited - if you set height to 100% then you get the
height of the immediate container - and if this happens to be a <div>
then it is the container rather than the whole page.

So, to set it in CSS, you need to use absolute position, not relative,
which means you need to set exactly where it appears on the page.

SAM · Jan 26, 2008

ShutterMan a écrit :

I believe it was phrased such as:

"Im asking how to use javascript to get the div tag to resize to it's
content, if
thats possible. "

Thomas 'PointedEars' Lahn · Jan 26, 2008

ShutterMan said:
No, I meant a DIV tag.

As I have pointed out already, there is no such thing. See also

especially the last said:
Is this grade school?

This is a technical newsgroup where technical discussions are led. Wouldn't
you agree that using the wrong terms in a technical discussion doesn't
exactly increase understanding of the matter discussed?

No, it doesn't.

Then either the user agent you have been testing with is utterly broken or,
what is more likely, you don't have a clue what you are doing. As for the
former, get a better UA. As for the latter, that is helped by reading
online documentation such as the CSS2 Specification I pointed you to, and
subscribing to the newsgroup comp.infosystems.www.authoring.stylesheets that
other people have pointed you to already.

[...]

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

That is the very nature of absolute positioning.

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

Click to expand...

www.disneyland.com

Go away.

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

The dynamics are built-in in (X)HTML, which is what you continue to fail to
realize.

But I'd like to.

That is your problem alone. Usenet is not the kind of "ask for something,
get what you asked for" communication medium. And that is actually a Good
Thing, because you may have asked the wrong question, as in this case.

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,

It was more than 50% helpful because now you know that you are on the wrong
track.

and more of the trolling nature.

More of a trolling nature is your insistence to do something and keep asking
about it even though you have been advised against it and kindly asked to go
elsewhere with it several times, plus your ongoing failure to provide
sufficient evidence that what you are asking requires scripting which was
the cause of the former.

http://www.catb.org/~esr/faqs/smart-questions.html

Score adjusted

PointedEars

ShutterMan · Jan 27, 2008

As I have pointed out already, there is no such thing. See also
<http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1>, especially the last
paragraph of that section.

If you say so... no such thing? lol
Your creditability just went out the window... (you were losing it
fast anyway)
http://www.w3schools.com/tags/tag_div.asp

This is a technical newsgroup where technical discussions are led. Wouldn't
you agree that using the wrong terms in a technical discussion doesn't
exactly increase understanding of the matter discussed?

Im not here to learn language arts, my friend, Im here to ask a simple
question on how to write some javascript code to solve a problem. Dont
like the question? Dont respond. Simple.

Then either the user agent you have been testing with is utterly broken or,
what is more likely, you don't have a clue what you are doing. As for the
former, get a better UA. As for the latter, that is helped by reading
online documentation such as the CSS2 Specification I pointed you to, and
subscribing to the newsgroup comp.infosystems.www.authoring.stylesheetsthat
other people have pointed you to already.

Obviously Im having some difficulty in getting what you think it
"should" be doing to do exactly that. Id hardly say I don't have a
clue. Or perhaps you don't quite have a clue what Im asking. Your
responses seem to indicate that anyway.

Go away.

Thats ok. How about dont respond? Again, Im not asking about CSS or
XHTML so much, as I am on how to solve a *javascript* issue. Dont like
it? Dont respond.

The dynamics are built-in in (X)HTML, which is what you continue to fail to
realize.

<sigh> You most certainly are clueless. "The dynamics are built-in
in..." lol..no, the "dynamics" is my server side code (PHP, ASP,
ASP.NET...server side code, if you even know what that is...)

That is your problem alone. Usenet is not the kind of "ask for something,
get what you asked for" communication medium. And that is actually a Good
Thing, because you may have asked the wrong question, as in this case.

How about it's NOT your problem. Some other folks have actually tried
to help. Don't try to speak for all usenet. Your ego precedes you, by
about 100 miles. A question isn't wrong - an answer is.

It was more than 50% helpful because now you know that you are on the wrong
track.

Actually it just shows me you have a difficult time reading and
understanding questions. And to basically ignore you since you offer
nothing.

More of a trolling nature is your insistence to do something and keep asking
about it even though you have been advised against it and kindly asked to go
elsewhere with it several times, plus your ongoing failure to provide
sufficient evidence that what you are asking requires scripting which was
the cause of the former.

lol... first, YOU arent the sole authority here. Second, I do not
consider your condescending tone "kindly asking". Third, I do not
need to provide evidence that I must do something a certain way before
I ask a question. I missed where I was in
comp.lang.richardwiththebadattitude

Richard, in all seriousness. If you cant answer the question, then
don't bother. People like you are just annoying, and whats funny is
that in your own warped mind, you think that you're actually
helping.

For example..."How do you start a car?" People like you say "Well, you
dont actually _start_ a car... you begin the process of spinning the
crankshaft electronically <www.somewebsitetoproveimsmart.com>, and
since you didnt phrase the question the way thats suits ME, then you
have no clue.".

People on usenet CAN be helpful; just as I hope I have helped you with
your personality issue. Have a good day.

ShutterMan · Jan 28, 2008

ShutterMan said the following on 1/27/2008 10:16 AM:

Who is Richard? You replied to Thomas (and all of what you said about
him is true).

lol... you know, its fine. You expect these things from time to time
on usenet. At some point, Ill scale down the stuff Im working on so I
can better demonstrate the problem, but Its rather loaded down right
now. Ive taken some of the alternate (ie useful) advice in the thread,
but still not much help. Im using ASP.NET 2.0, so I wonder if the
master page "feature" might be causing some problems with the DIV tags
and how they are working with each other. I wouldnt think so, since
the DIVs are dealt with by the client browser. Ah well, will continue
to work with it.

andrew.g.johnson · Feb 1, 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)

CSS:
html,body
{
height:100%;
width:100%;
margin:0;
padding:0
}

div
{
height:100%;
width:100%
}

HTML:
<html>
<head>
<title>Andrew Johnson Rules</title>
</head>
<body>
<div>

</div>
</body>
</html>

That should work...

Bart Van der Donck · Feb 1, 2008

ShutterMan said:
For example..."How do you start a car?" People like you say "Well, you
dont actually _start_ a car... you begin the process of spinning the
crankshaft electronically <www.somewebsitetoproveimsmart.com>, and
since you didnt phrase the question the way thats suits ME, then you
have no clue.".

You are very right. The best answer recognizes the problem, filters
the problem out of the question, ignores the irrelevant statements
around, and formulates a response that is as practical as possible
towards the filtered problem.

A good example how NOT to respond:

Dont like the question? Dont respond. Simple.

Maybe that should become a Posting Guideline

the perkiset · Dec 1, 2008

Sorry for bumping such an old thread, just found this group.

If you want to do this via JS & CSS and (like me) you never know what
the
height of a completed dynamic page will be, then this is the way for
you. This
also handles if the body is smaller than the window, or larger to make
sure
that whichever is larger is completely filled.

The example below puts the color red over the entire page or viewport,
whichever is larger:

<script>
function test()
{
var bodies = document.getElementsByTagName('BODY');
var body = bodies[0];
var newNode = document.createElement('DIV');

var ht = getWindowHeight();
if (document.body.offsetHeight > ht)
ht = document.body.offsetHeight;
var wd = getWindowWidth();
if (document.body.offsetWidth > wd)
ht = document.body.offsetWidth;

newNode.style.height = ht + 'px';
newNode.style.width = wd + 'px';
newNode.style.backgroundColor = 'red';
newNode.style.position = 'absolute';
newNode.style.top = '0px';
newNode.style.left = '0px';
newNode.style.zIndex = '10000';
newNode.innerHTML = ' '
body.appendChild(newNode);
}
</script>

If you need more help, you may ping me at www dot perkiset dot
org/forum/

Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Help with my responsive home page	2	Dec 14, 2022
Troubles with Fullpage / please help	0	Dec 14, 2023
Help please	8	Jul 7, 2023
Help with code	0	Jun 12, 2022
Flip-Cards with Local Images	1	Mar 27, 2023
How can I arrange a series of radio buttons?	2	Jan 25, 2024
How to have two html audio players on one page?	0	May 3, 2022

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

ShutterMan

Evertjan.

Evertjan.

ShutterMan

Evertjan.

Thomas 'PointedEars' Lahn

RobG

ShutterMan

Thomas 'PointedEars' Lahn

ShutterMan

ShutterMan

Evertjan.

The Magpie

SAM

Thomas 'PointedEars' Lahn

ShutterMan

ShutterMan

andrew.g.johnson

Bart Van der Donck

the perkiset

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads