Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css and Setting the height = 100%

Status
Not open for further replies.
joelwenzel

joelwenzel

Programmer
Jun 28, 2002
448
Is it possible to set the height equal to the length of the page in css?

I want to have two columns, both the same height but I find that even when I specify height:100%, one is smaller unless I put more stuff in the column. I can specify the height in pixels and have it give me the desired height but I want to be more flexable and use 100%
 
Sort by date Sort by votes
That's strange. I know I've had the same problem before, but setting it now works fine for me. What's the problem? That the stuff in centering itself? If that's the problem you are having, use valign="top" in the TD's. To test and see if height:100%; works, set a background color and see how far it reaches.

Rick It's a pleasure to know that I've helped you. If I have,
please click the link below to let me know. :)
 
Upvote 0 Downvote
Well, I know it's not working. I'm also trying to use height: 100% for some tab sheets I have created. Each tab sheet is contained within a <div> but none of the div blocks fill up the page. They just use the space they need
 
Upvote 0 Downvote
netscape doesn't seem to recognize the height: 100% and thus sets the height equal to 0.

Explorer does not seem to recognize it either but it sets the height equal to the height of the elements inside the block
 
Upvote 0 Downvote
Are you talking about the total document height or the window height?
 
Upvote 0 Downvote
total document height....

but I would be happy if it recognized window height too
 
Upvote 0 Downvote
You can position them in the window using CSS like this:

<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
height:100%;
}
#left {
position:absolute;
left:0;
top:0;
width:200px;
height:100%;
border:2px solid #000000;
}
#right {
height:100%;
margin-left:220px;
margin-right:20px;
border:2px solid #000000;
}
</style>
</head>
<body>
<div id=&quot;left&quot;>
</div>
<div id=&quot;right&quot;>
</div>
</body>
</html>


If you want them position at the bottom of the document you can use &quot;document.body.scrollHeight&quot; in javascript.





 
Upvote 0 Downvote
The javascript would look something like this:


document.getElementById(&quot;left&quot;).style.height = document.body.scrollHeight;
document.getElementById(&quot;right&quot;).style.height = document.body.scrollHeight
 
Upvote 0 Downvote
If you need a working js example let me know
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
762
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
736
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
589
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top