Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    100% Height Issues

    This isn't your standard 100% height issue, unfortunately. My issue is as follows:

    I have a site. There is a vertical content div aligned to the middle, this content section expands to 100% height using CSS. When the content expands and a vertical scroll bar is needed, the div expands as well, wrapping around any content.

    The problem is, while the div wraps around the content of a page that scrolls vertically, it doesn't reach all the way to the bottom anymore, instead, it now leaves an annoying gap between the bottom of the browser and where the content ends.


    Example HTML (simplified)
    Code:
    <body>
         <div id="middle">
              <div id="menu"> ... menu code ... </div>
    	  <div id="content"> ... the content ... </div>
    	  <div class="clear">&nbsp;</div>
         </div>
    </body>

    Example CSS (simplifed)
    Code:
    body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    }
    
    html {
    	height: 100%;
    	overflow: auto;
    }
    
    .clear {
    	clear: both;
    	height: 1px;
    }
    
    #content {
    	clear: both;
    	padding: 0px 10px 0px 10px;
    	position: relative;
    }
    
    #menu {
      	float: left;
      	height: 240px;
      	position: relative;
      	width: 100%;   
    }
    
    #middle {
    	left: 50%;
    	margin-left: -400px;
    	min-height: 100%;
    	position: relative;
    	width: 800px;
    	z-index: 1;
    }

    Here is the result I am seeing:



    If you look close, you'll see a vertical 2px tan bar, that's the content border. You can see it's clearly stopping about 10px from the bottom. This only happens when the content forces the browser to scroll vertically, with no vertical scroll, the border stretches all the way to the bottom.

    Any ideas?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kjtocool,
    #middle has some odd CSS that may not be helping your layout.
    I put some paragraphs in #content and it seems to enclose content when you have to scroll when viewed in FF3.5...

    But I still wonder if a different approach might help. I have a demo of a very simple full height layout here.

    That may help or maybe your doing something I'm not seeing on this end.
    Do you have a live link to a demo site?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    kjtocool (01-05-2010)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by kjtocool View Post
    I have a site. There is a vertical content div aligned to the middle, this content section expands to 100% height using CSS. When the content expands and a vertical scroll bar is needed, the div expands as well, wrapping around any content.
    That code looks really convoluted. I don't understand why you're using position: relative on #content, the .clear element and related CSS, or floating #menu.

    Quote Originally Posted by kjtocool View Post
    The problem is, while the div wraps around the content of a page that scrolls vertically, it doesn't reach all the way to the bottom anymore, instead, it now leaves an annoying gap between the bottom of the browser and where the content ends.
    With what little information you've provided, my guess is that you have an element with a bottom margin in #content or another element and that margin is collapsing through the bottom of its ancestor elements such that it's outside of the element you want it to be on.

    I believe you can fix that by applying overflow: auto or overflow: hidden to the element containing the element with the bottom margin to create a formatting context that the margin can't collapse through. Either that, or use padding instead.

    If that isn't your problem, I would suggest providing more information. Preferably, that would be a live document demonstrating the problem.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is, in my opinion, the most interesting part:
    CSS Code:

    //If first time key in date run statement
    if(first == 0){
    ++first;//Track if is the first record key in
    items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    //Else continue key in record
    else{
    entries = items[0].getEntries();//Get number of entries entered
    for(j=0; j<entries; ++j){

    duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

    if(duplicate == true) {
    Print.duplicateError();
    --i;
    --looping;
    break;
    }
    }
    if(duplicate == false)//else save record
    items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    ______________________
    website promotion|video submission

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    That code looks really convoluted. I don't understand why you're using position: relative on #content, the .clear element and related CSS, or floating #menu.

    With what little information you've provided, my guess is that you have an element with a bottom margin in #content or another element and that margin is collapsing through the bottom of its ancestor elements such that it's outside of the element you want it to be on.

    I believe you can fix that by applying overflow: auto or overflow: hidden to the element containing the element with the bottom margin to create a formatting context that the margin can't collapse through. Either that, or use padding instead.

    If that isn't your problem, I would suggest providing more information. Preferably, that would be a live document demonstrating the problem.
    Thanks guys for your help. Excavator, I plan to look at the centering CSS you linked to and will give that a once over tonight. I'm new to CSS, I've ignored it for far to long, and finally decided to jump on board. The downside is, I occasionally make simple things (centering) more difficult than they need to be.

    Arbitrator, here are two working examples that demonstrate the problem I was experiencing.

    http://www.karlandlisa.com/t1.html
    http://www.karlandlisa.com/t2.html

    t2 shows the desired effect, t1 shows the problem that occurs when content demands vertical scrolling.

    When I first experienced a problem, it was because #middle wasn't wrapping around content when it expanded past the bottom of the window. To find a solution, I started modifying various things, and thus ended up with the code I did. Part of that modification included adding the .clear class. This was used to ensure that #middle would correctly wrap around it's nested content (it wasn't at the time). It worked, but now there was a gap at the bottom of the screen. It turned out the .clear class was unneeded as using min-height: 100% on #middle took care of the problem instead.


    All that said, I hate using a negative margin to create the centered design, so hopefully I'll find something in the example posted above that can teach me how to avoid that (and the javascript that is needed to deal negative margins).

    Thanks guys!

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by kjtocool View Post
    http://www.karlandlisa.com/t1.html
    http://www.karlandlisa.com/t2.html

    t2 shows the desired effect, t1 shows the problem that occurs when content demands vertical scrolling.
    Assuming that the gap at the bottom is the problem, both of those examples exhibit the problem for me in Firefox 3.5.6.

    The issue appears to be the NO-BREAK SPACE character in the div.clear element. That character is supposed to be used when you want to prevent line-breaking around a space; the normal SPACE character allows a line-break. It appears that you're trying to use it as some kind of filler; I'm not sure why.

    Removing the offending character seems to solve the issue.

    Quote Originally Posted by kjtocool View Post
    When I first experienced a problem, it was because #middle wasn't wrapping around content when it expanded past the bottom of the window. To find a solution, I started modifying various things, and thus ended up with the code I did. Part of that modification included adding the .clear class. This was used to ensure that #middle would correctly wrap around it's nested content (it wasn't at the time). It worked, but now there was a gap at the bottom of the screen. It turned out the .clear class was unneeded as using min-height: 100% on #middle took care of the problem instead.
    That issue regarding the element not wrapping around "content" probably involved an element not wrapping around a float, which happens when floated content appears at the bottom of an element. I'd suggest reading Eric Meyer's Containing Floats article to get a feel for how floats actually work and why this problem exists.

    The correct solution is to simply set overflow: auto on the element that you need to wrap around the float. That creates a new styling context that the float can't escape from. (overflow: hidden does the same and kills any off-chance of scrollbars appearing, but is less safe since content may become hidden if the user does something like zoom the text size.)

    Quote Originally Posted by kjtocool View Post
    All that said, I hate using a negative margin to create the centered design, so hopefully I'll find something in the example posted above that can teach me how to avoid that (and the javascript that is needed to deal negative margins).
    The proper mechanism for aligning a block-level element (such as a div element), is to set a width on the element and use margin-left: auto and margin-right: auto. Used alone, they align in the respective direction and, used together, they center the element.

    ---

    Nice design by the way. I like the leaf-based navigation. You might want to pre-load those rollover images though; the effect is ugly if you have to wait for them to load.

    I'd also use a and img elements with alt attribute text to create your menu (instead of li elements with more filler NO-BREAK SPACE characters) because otherwise you get a blank red area with no content when images are disabled. That's not to mention that search engines can't follow links that only exist in scripted form. The Firefox Web Developer extension's "Images" > "Replace Images with Alt Attributes" option is handy for testing the accessibility of image-based menus.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    kjtocool (01-05-2010)

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I plan to pre-load all the images, just got caught up fixing other aspects before I got to that point.

    The reason you're seeing the gap on both is presumably because your monitor has a shorter vertical resolution than mine, so the content is being pushed past the bottom of your screen, where on mine, it isn't. The pushing past the bottom is what causes the gap from my experience.

    I'll probably try switching the menu to img and a tags tonight, I've used that solution before without issue in a <table> based design, but never with a <div> based design. Good point though regarding search engines, I somehow overlooked that. The reason I used a ul to begin with is simply because I need access to onmouseover and onmouseout events, which I think should work fine with some minor tweaks if each li has a nested a and img tag.

    Thanks for your help!

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by kjtocool View Post
    The reason you're seeing the gap on both is presumably because your monitor has a shorter vertical resolution than mine, so the content is being pushed past the bottom of your screen, where on mine, it isn't. The pushing past the bottom is what causes the gap from my experience.
    I'd guess it's because I've set the default font size to 18 pixels in Firefox.

    Anyway, I checked and, indeed, I have scrollbars on both pages in Firefox. Things appear as you describe in Google Chrome though. In both browsers, I'm getting a text selection cursor at the bottom, so I think the problem is still related to those NO-BREAK SPACE characters. I'd implement the overflow property-based method of float clearing, the margin property-based method of block centering, and remove the offending filler characters to see if those things clear up the problem before seeking other resolutions.

    Quote Originally Posted by kjtocool View Post
    The reason I used a ul to begin with is simply because I need access to onmouseover and onmouseout events, which I think should work fine with some minor tweaks if each li has a nested a and img tag.
    If I'm not mistaken, all of those elements have the mentioned attributes. You don't strictly need them though since you can create event handlers via scripting using DOM2 Events' addEventListener method or Microsoft's attachEvent method (used for IE).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Arbitrator,

    Two questions:

    1) I assume there is no way to center an absolutely positioned div aside from a negative margin?
    2) The page linked below is confusing me. Something is going on with the stacking context that I don't fully understand. It's a pretty simple structure:

    <div id="middle"></div>
    <div id="dim"></div>

    #middle is relative positioned with a z-index of 1, while #dim is relatively positioned with a z-index of 3.

    I had thought that both #middle and #div would be in the same stacking context of html, and thus the higher z-index would put one above the other. However, it seems that's not the case. Instead, the only way I can get #dim to overlay #middle is by setting #middle to be absolute positioned, which then left aligns #middle.

    Any chance you can better explain what's going on and how I can get #dim to overlay #middle without sacrificing the alignment?

    http://www.karlandlisa.com/gallery_misc.php


    Update:

    I found this article: https://developer.mozilla.org/En/Und...acking_context I guess the answer is to move #dim above #middle, and then make #dim absolutely positioned. I suppose the more I think about it, this makes sense. Since both divs were relatively positioned, they must each create their own stacking context, and thus can't overlay each other regardless of z-index. But why if I make #dim absolute positioned does it still not overlay unless it's moved ahead of middle in the html?
    Last edited by kjtocool; 01-07-2010 at 03:45 AM.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by kjtocool View Post
    1) I assume there is no way to center an absolutely positioned div aside from a negative margin?
    You can center such an element by setting the left and right properties while leaving the width property with the default value of auto. The width will automatically be calculated based upon the remaining space.

    I don't think that this technique is used very often though since it means that the width cannot be fixed; the width is dependent upon the space left over on the user's monitor. That and the technique wasn't supported properly in IE until after version 6.

    I'm thinking you can center fixed-width elements by setting the left and right properties to 0 and using automatic margins for both sides, but I haven't tested that. (I rarely use the absolute positioning model, so I've forgotten all the details.)

    I don't see any reason why your layout should be absolutely positioned in the first place though. This is a property that should be rarely used in a properly designed Web site.

    Quote Originally Posted by kjtocool View Post
    2) The page linked below is confusing me. Something is going on with the stacking context that I don't fully understand. It's a pretty simple structure:

    <div id="middle"></div>
    <div id="dim"></div>

    #middle is relative positioned with a z-index of 1, while #dim is relatively positioned with a z-index of 3.
    I wrote a demo and posted it to http://www.jsgp.us/demos/cf185871/. It would seem to indicate that DOM tree order is irrelevant for the purpose of stacking elements by z-index in the latest versions of Firefox, Google Chrome, Internet Explorer, Opera, and Safari, so I'm not sure what the issue with your Web site is.

    On your site, I tried changing div#dim from position: absolute to position: relative and the elements moved, but were nevertheless stacked in the expected order.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I guess my question really is this simple: If I have two divs like so:

    <body>
    <div id="1">1</div>
    <div id="2">2</div>
    </body>

    And if both are relatively positioned ... can z-index (or CSS in general) make 2 sit on top of 1, and if not, why not? Even more, if instead you make 2 absolute positioned, why does it only overlay if it comes first in the tree order?

    All I'm really trying to do here is create a div that will cover the entire page, 100% width and height, overlaying all other content. I'd prefer to put all content in div 1, and then have div 2 be the one which overlays. The only way I can seem to accomplish this is by absolute positioning div 2 and putting it first in the tree structure.
    Last edited by kjtocool; 01-07-2010 at 09:29 PM.

  • #12
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Arbitrator,

    This was the effect I was going for: http://www.karlandlisa.com/gallery_misc.php

    I had to use an absolute positioned div to accomplish it, and had to put it ahead in the dom tree, but it does seem to be working. The only issue I can find with it so far is that when switching between images ... it seems the image switch takes too long if the image isn't fully loaded into the cache? I'm not sure why, as I'm pre-loading the images ... but if thats the only issue then I can't complain too much.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •