473,385 Members | 2,005 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,385 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 1295
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Catherine Lynn Smith | last post by:
OK, I am learning my way around the new DOM, but I am still at a loss on finding a few things. I have an HTML document that links to a stylesheet. /* START STYLESHEET EXAMPLE */ /*...
2
by: nbaxley | last post by:
I'm trying to detemine the height of a div in javascript. The actual height is defined in the attached stylesheet. When I query document.getElementById("ModuleHeader").style.height I get...
2
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/authoring-faq Posting-Frequency: twice a week (Mondays and Thursdays) Last-modified: August 28, 2002 Version: 1.15 URL: http://css.nu/faq/ciwas-aFAQ.html...
3
by: Jamie | last post by:
Hi, Thanks for the excellent answer to my last question! One more: Does anyone have a method they follow for organizing stylesheets themselves? They seem like they can get bloated and hard to...
3
by: Robi | last post by:
ok, I have a page, where the DOM is being updated by JavaScript. in the original version, there is a document.write creating the following: <div id="first"...
7
by: stefano | last post by:
Hi all, I hopen a new empty window from js code: var win = window.open("","debug","width=500,height=300,modal,dialog,resizable"); and I add some element to the new window:...
31
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would...
14
by: Stapes | last post by:
Hi I have this entry in my stylesheet main1.css: #head { width: 310px; height: 60px; float: left; display: block; background-image: url(logo.jpg); background-position: left top;
4
by: matt urbanowski | last post by:
Hi, I have a stylesheet (.css) file with classes in e.g. ..csHeader_tdLogo { background-position: top left; vertical-align: top; background-image: url(Images/Header_Logo.gif); width: 171px;...
3
by: Leighya | last post by:
Im currently working on this xml file but when i load it to Mozilla, i got an error "Error Loading Stylesheet: Xpath parse failure: invalid variable name" It loads on IE properly. Only with the...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

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.