473,326 Members | 2,048 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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

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
14 3188
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
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
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
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
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Kragspire | last post by:
I have some code that I would like to be able to print out a first name on a new page of paper each time it runs. The problem I have is when it reaches the end of the printing it produces a blank...
3
by: deepak datta | last post by:
Vertical lines separating the "Welcome" & "Mission Statement" have more space compared to the vertical line separating "mission statement" & "search the site" section. Please suggest solution. I...
16
by: expertware | last post by:
Dear friends, My name is Pamela, I do not know anything about javascript, but I would like to ask if it offers a solution to this problem of mine. I have an image on a web page within a css...
0
by: davidpenty | last post by:
Hi there, I am having some problems with a multi-threaded asp.net seach page. My search page sends off four asynchronous http requests to four search engines then waits for the results to come...
2
by: General | last post by:
Hi All, I installed visual studio 2005, framework, sdk, and i was register aspregiss -i but i am receiving this error any page any code The page cannot be found The page you are looking...
3
by: backups2007 | last post by:
Here'es my code. I double checked it and I can't seem to find any reason why it won't work. Or maybe I just missed something. Please help. Thanks. If you have any suggestion on how I can improve this...
1
by: kprojects | last post by:
Hello, Im creating an applet in which the user has to log in, and after he did this with the correct login details he will be redirected to a java page with his account details (Just another page...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.