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 Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

100% height in scrolling window 2

Status
Not open for further replies.
Glasgow

Glasgow

IS-IT--Management
Jul 30, 2001
1,669
GB
I have been struggling with a left border menu to ensure that it stretches to accommodate the full window as it is resized. It took me a while but I finally got a result such that most windows will be fine and if I resize them, my menu still occupies the full height.

However, if the browser window is too small to accommodate the entire display (i.e. scrollbars appear), then I get a problem where the menu remains as the height of the window itself so as I scroll downwards my menu ends and white space appears. It makes me start to think 'exactly what does 100% mean?' - 100% of the total browser window height it would appear. I would prefer 100% of total scrollable area.

Any ideas as to how I might resolve this?

Thanks in advance.
 
Sort by date Sort by votes
You can try to put your menu into a Div with its "overflow" style set to "hidden". This way, if you buid correctly your div and menu, no scroll should appear.

Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Thanks - that does not seem to make any difference but I'm not sure that we understand each other. The scrollbars are being triggered because I'm simply generating quite a big page (this is actually ASP) which is fine. I just want the menu 'column' on the left to expand with the page so I get a solid colour right down the left hand side.
 
Upvote 0 Downvote
Giving us a little more info would help us help you better. Depending on what technique you're using, so will be the solutions:

1. Table: Solution should be there. Post code or better a link for us to see it in action
2. CSS
2a) CSS with relative and absolute positioning: Look at faux columns at A List Apart
2b) CSS with floats: This will be more difficult. Post a link to the site for us to help.
x. Anything else. Again, post a link to the site.
 
Upvote 0 Downvote
Fair comment. The site is not live so a link is not possible at this stage. The menu code is in a table which I recently put in a div to try and resolve the problem. The menu is in an SSI include file. I use CSS also to control the style of the table and its different cell types. My code is a bit of a mess simply because I have tried so many different things.

What I will aim to do (probably Monday) is narrow the code down to create a more concise example rather than subject the forum to the existing mess.

Thanks.
 
Upvote 0 Downvote
Put the menu in a DIV and put the DIV at the END of the content (right before the </html>) with absolute positioning specifying TOP, LEFT, and WIDTH. The DIV should then size itself to the height of the entire content of the page.

Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
Mike - I tried your suggestion but no luck. I have also narrowed down the code to:

The main page file:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<link rel="stylesheet" type="text/css" href="Test.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div class="PnlMain">
  <p>Long div</p>
</div>
<div class="PnlMenu">
  <table>
    <tr><td>Menu</td></tr>
  </table>
</div>


</body>
</html>
The Test.css file:
Code: 
body                { margin:0; padding:0; border:none; height:100%;}
div.PnlMenu         { background-color: rgb(199,202,202); position:absolute; 
                      top: 0px; left: 0px; width:130px;height:100%;}
div.PnlMain         { height:1000px; background-color:rgb(220,220,239); margin-left:130px; }
I suspect my mistake may now be obvious to others but I can't see it. Symptoms are that the 'main' div (right hand side) extends beyond the bottom of the browser window but the 'menu' div (left hand side) occupies the height of the browser window only.

If I take away the 100% height from the body tag, the menu shrinks to the height of the text within it.

Any thoughts?
 
Upvote 0 Downvote
From what I am seeing .PnlMenu has no need to be absolutely positioned and since it is a good practice to avoid that if not needed, I would try avoiding it. Here's the explanation:

Positioned items (absolutely or relatively) are positioned according to their first positioned parent, or if that one is not found, the body. In your case, .PnlMenu has a parent, .PnlMain which has a height of 1000px but is not positioned. Thus, .PnlMenu will not relate to that. Move on to next parent. Next parent is the body. If the height of the body is set to 100% (one browser screen), then .PnlMenu's 100% height of that is, well one browser screen. Standards also say that if parent's size is not defined, 100% equals value auto, meaning it is only as high as the content of the box. This is again something that your page does. So, everything makes perfect sense.

I do believe reading this explanation should give you clue on how to solve the problem, but if you missed it:
Code: 
div.PnlMain         { height:1000px; background-color:rgb(220,220,239); margin-left:130px; position: relative; }
 
Upvote 0 Downvote
I appreciate the explanation (thanks) but I tried the change and it had no effect. What defines a 'parent' in this context? Is .PnlMain the parent of .PnlMenu simply because it is defined first?

Should I remove the 100% body height (I think I put that in in an attempt to resolve this problem).
 
Upvote 0 Downvote
Ooops, sorry. I glanced at your html code and thought that PnlMenu was a inside .PnlMain. If that were the case it would work. Since it will not, it won't. That is why I thought PnlMenu was the child of PnlMain. As it is, the code is still behaving correctly. PnlMenu is 100% of its parent, which is body. If you want you can make the body be 1000px high and that will solve the problem or move PnlMenu inside PnlMain. Or, position PnlMenu relatively and it will always appear below PnlMain. Best thing to do is to read up on absolute positioning and how it works.
 
Upvote 0 Downvote
Actually, in your example .PnlMenu div's parent is the body. However, if it were inside of the .PnlMain div then .PnlMain would be its 'parent' (or 'container').

Here's a good link describing '100% height':
Note this paragraph near the bottom of that page:
For instance, if you want to make an element as high as the entire page (whatever this height may be) you're out of luck. Although it might seem simple the specs (and the browsers' unthinking conformance) make this completely impossible.
Click to expand...

The best thing to do (because I'm not fond of tables for layout) is to use CSS layout techniques to create two columns. Then, as Vragabond posted above, use faux columns to make it appear as though your menu extends down the whole page.
 
Upvote 0 Downvote
Thanks so much for sticking with this. I have made some progress thanks to the previous 2 posts. I have got the simple example above working by making PnlMain the parent of PnlMenu and everything is fine when the height of PnlMain is fixed at 1000px.

However, in the live environment, I am using ASP to generate the page and, in particular, the content of PnlMain so its height is not fixed and as soon as I try to implement the same solution, I am back to square one.

The Css is now:
Code: 
html                { margin:0; padding:0; border:none; }
body                { margin:0; padding:0; border:none;
                      font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8.5pt;}
div.PnlMenu         { background-color: rgb(199,202,239); position:absolute; 
                      top: 0px; left: 0px; width:130px; height:100%; }
div.PnlMain         { background-color:rgb(199,220,239); margin-left:130px; }
and the page is
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<link rel="stylesheet" type="text/css" href="Master01.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<div class="PnlMain">
  <div class="PnlMenu">
    <table>
      <tr><td>Menu</td></tr>
    </table>
  </div>
  <p><b>Line 1</b></p>
  <p><b>Line 2</b></p>
  <p><b>Line 3</b></p>
  <p><b>Line 4</b></p>
  <p><b>Line 5</b></p>
  <p><b>Line 6</b></p>
  <p><b>Line 7</b></p>
  <p><b>Line 8</b></p>
  <p><b>Line 9</b></p>
  <p><b>Line 10</b></p>
  <p><b>Line 11</b></p>
  <p><b>Line 12</b></p>
  <p><b>Line 13</b></p>
  <p><b>Line 14</b></p>
  <p><b>Line 15</b></p>
  <p><b>Line 16</b></p>
  <p><b>Line 17</b></p>
  <p><b>Line 18</b></p>
  <p><b>Line 19</b></p>
  <p><b>Line 20</b></p>
  <p><b>Line 21</b></p>
  <p><b>Line 22</b></p>
  <p><b>Line 23</b></p>
  <p><b>Line 24</b></p>
  <p><b>Line 25</b></p>
  <p><b>Line 26</b></p>
  <p><b>Line 27</b></p>
  <p><b>Line 28</b></p>
</div>

</body>
</html>
Do you have any idea where I could be going wrong this time? Perhaps it's time I considered an alternative career.
 
Upvote 0 Downvote
Ok, I admit this is the first time I really looked at what you're trying to do. You want the left column, which is absolutely positioned to extend to the end of the right column. If right column has no height defined, this will not work, since that is what the specs say. However, for the third time in this thread (try to use it now) I suggest you use faux columns as it will achieve exactly the desired effect. Here's the example on your code -- just assume you want the left column to be red all the way to the bottom of the right column:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<style type="text/css">
body                { margin:0; padding:0; 
                      font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8.5pt;}
div.PnlMenu         { position:absolute; 
                      top: 0px; left: 0px; width:130px; }
div.PnlMain         { background-color: rgb(199,220,239); margin-left:130px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div style="position: relative; background: red;">
  <div class="PnlMenu">
    <table>
      <tr><td>Menu</td></tr>
    </table>
  </div>
  <div class="PnlMain">
  <p><b>Line 1</b></p>
  <p><b>Line 2</b></p>
  <p><b>Line 3</b></p>
  <p><b>Line 4</b></p>
  <p><b>Line 5</b></p>
  <p><b>Line 6</b></p>
  <p><b>Line 7</b></p>
  <p><b>Line 8</b></p>
  <p><b>Line 9</b></p>
  <p><b>Line 10</b></p>
  <p><b>Line 11</b></p>
  <p><b>Line 12</b></p>
  <p><b>Line 13</b></p>
  <p><b>Line 14</b></p>
  <p><b>Line 15</b></p>
  <p><b>Line 16</b></p>
  <p><b>Line 17</b></p>
  <p><b>Line 18</b></p>
  <p><b>Line 19</b></p>
  <p><b>Line 20</b></p>
  <p><b>Line 21</b></p>
  <p><b>Line 22</b></p>
  <p><b>Line 23</b></p>
  <p><b>Line 24</b></p>
  <p><b>Line 25</b></p>
  <p><b>Line 26</b></p>
  <p><b>Line 27</b></p>
  <p><b>Line 28</b></p>
</div>

</body>
</html>
 
Upvote 0 Downvote
Thank you for your patience Vragabond. The help is appreciated. I did not mean to appear to be ignoring suggestions - but as alternatives were being posed and I was having some success, the alternative seemed worth pursuing. No longer perhaps.

I have it working using the faux columns using the 'easy' background-color approach though I suspect that I may have to go for the 'smarter' tiled image suggested in philote's link.

Thanks again and sorry for making you work so hard for the star!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
779
PeDa
PeDa
Alt255
  • Locked
  • Question
Navigate to bookmark in local file
Replies
2
Views
717
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top