SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 100% Vertical Stretch

    Hi, I'm designing a site that has multiple divs within in each other, and I'm trying to get a div to stretch the length of the content that's in a div within in.

    The html looks like this:
    <html>
    <body>
    <div id="pagewidth">
    <div id="maincontent">
    <p>the content goes here</p>
    </div>
    </div>
    </body>
    </html>



    The CSS looks like this:
    body, html {
    height: 100%;
    }
    #pagewidth {
    height: 100%;
    width: 875px;
    margin-top: 50px;
    margin-bottom: -200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    clear: both;
    background-color: black;
    }
    html>body #pagewidth {
    min-height: 100%;
    height: auto;
    }
    #maincontent{
    position: absolute; top: 260px;
    float: none;
    clear: both;
    width: 750px;
    margin-left: 30px;
    margin-right: auto;
    margin-top: 70px;
    margin-bottom: 70px;
    padding: 30px;
    background-color: white;
    }


    So the #pagewidth div is supposed to form a kind of frame around the #maincontent div. As you can see, I've tried using min-height: 100%, height: 100%, but #pagewidth does not stretch when the content exceeds the capacity of the browser window - it pretty much stops where the window stops.

    (I also tried just doing "min-height: 100%; height: auto;" in the #pagewidth div instead of in "html>body #pagewidth". Neither works.)

    How can I get that div to stretch to fill 100% of the page?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is how with pure css http://www.visibilityinherit.com/cod...ns-withcss.php. The other option is to use a repeating-y image and fake it.

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So how exactly would using faux columns help me?
    I've also set the background for each div to repeating background images, but they stop when the div stops and the end of the browser window.

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I just tried the following with no luck:

    body, html {
    height: 100%;
    }
    #pagewidth {
    min-height: 100%;
    }
    * html #pagewidth {
    height: 100%;
    }

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to SitePoint!
    Am afraid you are misinterpreting a few concepts in your code and may have to rethink what you are trying to do.

    #1) you have some conflicting rules, but that not what really holding you back
    #2) you used position:absolute; on #maincontent this takes your element out of the normal flow. that means that the size of #maincontent doesn't affect its parent #pagewidth.

    anyway, may have miscalculated some numbers for the exact dimensions of your page, but i think this is what you were trying to achieve:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    
    <style>
    
    
    body, html {
    height: 100%; margin:0;
    }
    #pagewidth {
    width: 815px;
    margin: -20px auto 0  auto;
    padding:0; border-style: solid; border-color:#000;
    border-width:30px;
    border-top-width:0;
    border-bottom-width:20px;
    background-color: $fff; 
    min-height:100%;
    }
    #cwrap{
    border-top:350px solid #000;
    background-color: #fff;
    }
    #maincontent{
     padding: 30px;
    }
    	
    </style>
    </head>
    <body>
    <div id="pagewidth">
         <div id="cwrap">
              <div id="maincontent">
            	  <p>the content goes here</p>
              </div>
         </div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Sorry then I must be confused as to what your after. Still am a bit. Are you just trying to get your main div to always be 100% high?

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you can show us what it is supposed to look like then it will be easier to help. From your code I gather that there will be a header above #maincontent but I'm not sure.

    Oh, and why does #maincontent have position:absolute? And what's with the clearing?

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, sorry, I wasn't completely clear about all this.
    Firstly, the reason I'm using absolute positioning is because I have a horizontal menu bar above the #maincontent div that uses float (because it has drop-down components). The absolute positioning is the only way I could find to keep the rest of the content from floating around the drop-down parts of the menu. That is, I don't want the page to move or change at all when I mouse over the nav bar and the drop-down part appears.

    I'm aware that using absolute positioning takes a div out of the flow of the rest of the content, but I can't really find another way around the issue.
    So basically, what I'm trying to do is to get #pagewidth to stretch to be as tall as the page, not just the window (which is how it is now), so that it is present around all the content in #maincontent.

    For example, this is what happens now when the content exceeds the size of the browser window:

    but I want it to do this instead:


    Is that clearer? Thank you guys for your replies!

  9. #9
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right, and here it is with the nav bar/header


  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, but you don't need an absolute position for that: Son of Suckerfish Dropdowns | HTML Dog

  11. #11
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I'm using float for the menu. I'm using absolute positioning for the content because if I use relative positioning for it, it moves down every time I mouse over the menu bar. I've added "clear: both;" to the main content, too, but it still moves down whenever the dropdown appears. If I could find another way around that particular problem, the "height: 100%" stuff wouldn't be a problem, since that's due to the absolute positioning.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok. Make the nav nothing. Just put it there. Make the nested ul position absolute. That way nothing moves. Now you can get rid of the AP on your main content and the page should stretch as you want.

  13. #13
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to better demonstrate what I mean, this is what happens to the main content of the page when I use relative positioning.

    before mousing over the nav bar it looks like this:


    and upon mousing over everything moves down:


    So if I can find a way to stop the content from moving around that floating nav bar, that nullifies my height problem.


    Once again, thank you guys for your help.

  14. #14
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ok. Make the nav nothing. Just put it there. Make the nested ul position absolute. That way nothing moves. Now you can get rid of the AP on your main content and the page should stretch as you want.
    can you explain what you mean by "make the nav nothing"?

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    The standard way to do a dropdown is to make the top-level navigation (the horizonatal UL) position: relative, and then the sub lists position: absolute. The position: relative on the main menu doesn't affect its position on the page or affect how other elements interact with it, so it's quite safe to use.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Read the CSS FAQ on 100% height (see my sig) as it will help you to understand when you can use it and more to the point why you can't use it most of the time.

    You cannot nest elements of 100% height inside each other because that means the inner elements can never grow as they are limited to the initial height of the parent and will just overflow as you found out.

    Neither can you nest min-height:100% elements because you can't base a percentage min-height on a parent that doesn't have a defined height. The height just defaults to auto (effectively content height).

    It's a catch 22 situation and effectively you can only ever have 1 100% height element on the page and that is the first element on the page only (and contains all content) and it will be min-height:100% and basing its height from html,body{height:100%}.

    Everything must be done on his one element only which is why the faux column approach is easiest when you want multiple equal columns.

    For IE8+ you could use the display:table properties to make height:100% expand but this won't work in IE7 and under so is seldom used.

    There is another way to make multiple background and that is to use an absolute overlay method to provide background colours only as mentioned in this example. That will allow you to do clever things like this.

    However it looks from your example that you only have one background that needs to be 100% and as Dresdens example above shows you should be able to do that relatively easily using the basic principal as mentioned earlier.

    If you want specific help with your code then we'd probably need to see the site to have something to play around with properly.

    As others have said above the nav itself can be in the flow to take up room but just make the dropdowns absolute. If that's too awkward to change with the way you have it set up then just account for the space the top nav takes in the flow with some padding on an adjacent element.

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ThorPlusA View Post
    can you explain what you mean by "make the nav nothing"?
    Sure, it was just a stupid way of saying don't give it any CSS - just put it there (aka position static). But as Ralph and others pointed out I forgot the key piece there - position relative. In short, I provided no helpful information within this thread - lol.

  18. #18
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys all so much for your help! I changed the nav bar to use relative and absolute positioning, and everything works now.

  19. #19
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Felt victorious a bit too early there. It works in Safari and Firefox, but in Opera, the submenu appears when I mouseover the header, but disappears as soon as I move the mouse down towards the submenu. Any ideas as to why this might be happening?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ThorPlusA View Post
    Felt victorious a bit too early there. It works in Safari and Firefox, but in Opera, the submenu appears when I mouseover the header, but disappears as soon as I move the mouse down towards the submenu. Any ideas as to why this might be happening?
    This usually happens if the submenu isn't touching the parent. There can be no gap between the submenu and the parent trigger or the focus is lost and the menu disappears.

  21. #21
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    This usually happens if the submenu isn't touching the parent. There can be no gap between the submenu and the parent trigger or the focus is lost and the menu disappears.
    I thought that might be the problem, but the hover only works if the submenu is overlapping the parent. Obviously I don't want the submenu to be on top of the parent, though, so the problem still remains. I've been searching around and apparently Opera has some hover issues. Still haven't found a solution though.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    See my answer in your other thread

    Opera has no problems if you make sure everything is exact like I mention in the link above. I never usually have trouble with modern Opera when using dropdowns.


Tags for this Thread

Bookmarks

Posting Permissions

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