472,126 Members | 1,643 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

stylesheet height

I have a DIV which I want to automatically resize when the user resizes the
browser.

The width setting is easy - I want it to appear on the left hand side of the
page and take up 50% of the screen so I set width:50%.

The height is more tricky since I want to size it from it's rendered
Y-position (which is not 0) down to the bottom of the browser. Hence if the
user resizes downwards the DIV should expand itself to fit the height
available. Since its Y position is not 0, setting height:100% will not work.
So I really need something like height:-30px assuming my div starts at
Y-co-ordinate 30 - but I'm not using absolute positioning so this may vary!

Any suggestions ?
Nov 18 '05 #1
4 1264
you need to write javascript that does the resize. catch the onresize event,
and calc the new height for the div. see the html dom documentation for
properties.

-- bruce (sqlwork.com)
"JezB" <je***********@blueyonder.co.uk> wrote in message
news:O6*************@tk2msftngp13.phx.gbl...
I have a DIV which I want to automatically resize when the user resizes the browser.

The width setting is easy - I want it to appear on the left hand side of the page and take up 50% of the screen so I set width:50%.

The height is more tricky since I want to size it from it's rendered
Y-position (which is not 0) down to the bottom of the browser. Hence if the user resizes downwards the DIV should expand itself to fit the height
available. Since its Y position is not 0, setting height:100% will not work. So I really need something like height:-30px assuming my div starts at
Y-co-ordinate 30 - but I'm not using absolute positioning so this may vary!
Any suggestions ?

Nov 18 '05 #2
You wouldn't like to tell me how would you ? Cannot get it to work ... I
know next to nothing about javascript so I'm probably doing something
stupid.

"bruce barker" <no***********@safeco.com> wrote in message
news:el**************@TK2MSFTNGP12.phx.gbl...
you need to write javascript that does the resize. catch the onresize event, and calc the new height for the div. see the html dom documentation for
properties.

-- bruce (sqlwork.com)
"JezB" <je***********@blueyonder.co.uk> wrote in message
news:O6*************@tk2msftngp13.phx.gbl...
I have a DIV which I want to automatically resize when the user resizes

the
browser.

The width setting is easy - I want it to appear on the left hand side of

the
page and take up 50% of the screen so I set width:50%.

The height is more tricky since I want to size it from it's rendered
Y-position (which is not 0) down to the bottom of the browser. Hence if

the
user resizes downwards the DIV should expand itself to fit the height
available. Since its Y position is not 0, setting height:100% will not

work.
So I really need something like height:-30px assuming my div starts at
Y-co-ordinate 30 - but I'm not using absolute positioning so this may

vary!

Any suggestions ?


Nov 18 '05 #3
How about this - IE only
<style type="text/css">
#test{
position:absolute;
top:100px;
left:100px;
border:1px solid black;
width:100px;
height:expression(body.clientHeight-100 + "px");
}
</style>
</head>
<body>
<div id="test">
text
</div>

A lazy answer but might be good enough :-)

Cheers,
Jon

"JezB" <je***********@blueyonder.co.uk> wrote in message
news:uf**************@TK2MSFTNGP10.phx.gbl...
You wouldn't like to tell me how would you ? Cannot get it to work ... I
know next to nothing about javascript so I'm probably doing something
stupid.

"bruce barker" <no***********@safeco.com> wrote in message
news:el**************@TK2MSFTNGP12.phx.gbl...
you need to write javascript that does the resize. catch the onresize

event,
and calc the new height for the div. see the html dom documentation for
properties.

-- bruce (sqlwork.com)
"JezB" <je***********@blueyonder.co.uk> wrote in message
news:O6*************@tk2msftngp13.phx.gbl...
I have a DIV which I want to automatically resize when the user
resizes the
browser.

The width setting is easy - I want it to appear on the left hand side
of the
page and take up 50% of the screen so I set width:50%.

The height is more tricky since I want to size it from it's rendered
Y-position (which is not 0) down to the bottom of the browser. Hence
if the
user resizes downwards the DIV should expand itself to fit the height
available. Since its Y position is not 0, setting height:100% will not

work.
So I really need something like height:-30px assuming my div starts at
Y-co-ordinate 30 - but I'm not using absolute positioning so this may

vary!

Any suggestions ?



Nov 18 '05 #4
I could give that a try, thanks, but I really need something that will work
in most browsers - what makes this IE only ? body.clientHeight ?
I have found a method which does work but I'm using
document.body.offsetHeight - is this IE only too ?

"Jon Spivey" <jo**@mvps.org> wrote in message
news:uH**************@TK2MSFTNGP11.phx.gbl...
How about this - IE only
<style type="text/css">
#test{
position:absolute;
top:100px;
left:100px;
border:1px solid black;
width:100px;
height:expression(body.clientHeight-100 + "px");
}
</style>
</head>
<body>
<div id="test">
text
</div>

A lazy answer but might be good enough :-)

Cheers,
Jon

"JezB" <je***********@blueyonder.co.uk> wrote in message
news:uf**************@TK2MSFTNGP10.phx.gbl...
You wouldn't like to tell me how would you ? Cannot get it to work ... I
know next to nothing about javascript so I'm probably doing something
stupid.

"bruce barker" <no***********@safeco.com> wrote in message
news:el**************@TK2MSFTNGP12.phx.gbl...
you need to write javascript that does the resize. catch the onresize event,
and calc the new height for the div. see the html dom documentation for properties.

-- bruce (sqlwork.com)
"JezB" <je***********@blueyonder.co.uk> wrote in message
news:O6*************@tk2msftngp13.phx.gbl...
> I have a DIV which I want to automatically resize when the user resizes the
> browser.
>
> The width setting is easy - I want it to appear on the left hand side of
the
> page and take up 50% of the screen so I set width:50%.
>
> The height is more tricky since I want to size it from it's rendered
> Y-position (which is not 0) down to the bottom of the browser. Hence if the
> user resizes downwards the DIV should expand itself to fit the

height > available. Since its Y position is not 0, setting height:100% will not work.
> So I really need something like height:-30px assuming my div starts at > Y-co-ordinate 30 - but I'm not using absolute positioning so this may vary!
>
> Any suggestions ?
>
>



Nov 18 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Jamie | last post: by
3 posts views Thread by Robi | last post: by
7 posts views Thread by stefano | last post: by
4 posts views Thread by matt urbanowski | last post: by

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.