By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,491 Members | 3,132 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,491 IT Pros & Developers. It's quick & easy.

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

P: n/a
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)
Jan 25 '08 #1
Share this Question
Share on Google+
14 Replies


P: n/a
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)
Jan 25 '08 #2

P: n/a
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 if you have other
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>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 25 '08 #3

P: n/a
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)
Jan 25 '08 #4

P: n/a
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.
Jan 25 '08 #5

P: n/a
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)
Jan 25 '08 #6

P: n/a
On Jan 26, 4:44*am, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
[...]
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
Jan 25 '08 #7

P: n/a
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.
Jan 26 '08 #8

P: n/a
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
Jan 26 '08 #9

P: n/a
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.
Jan 26 '08 #10

P: n/a
Richard says Im offtopic here, but Im not-

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. "
Jan 26 '08 #11

P: n/a
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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jan 26 '08 #12

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

<snip>
Richard, in all seriousness.
Who is Richard? You replied to Thomas (and all of what you said about
him is true).

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 27 '08 #13

P: n/a
On Jan 27, 5:27 pm, Randy Webb <HikksNotAtH...@aol.comwrote:
ShutterMan said the following on 1/27/2008 10:16 AM:

<snip>
Richard, in all seriousness.

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.
Jan 28 '08 #14

P: n/a
ShutterMan wrote:
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:

http://www.youtube.com/watch?v=axrE2VwbdtA
Dont like the question? Dont respond. Simple.
Maybe that should become a Posting Guideline :)

--
Bart
Feb 1 '08 #15

This discussion thread is closed

Replies have been disabled for this discussion.