Results 1 to 4 of 4

Thread: 100% div height is acting up and i can't find a repeat anywhere online!

  1. #1
    Join Date
    Jul 2008

    100% div height is acting up and i can't find a repeat anywhere online!

    I've been searching all over the internet and I can't find someone duplicating this problem, so I'm perplexed.

    I understand that in CSS you can only assign a 100% height if it's nested inside something else with an assigned height. So, the solution most people have put forth is to assign the body and html tags 100% height. Then, you're able to assign a div 100% height because it has something to factor from.

    Well, it works. But it's taking things too literal. I can assign my div 100%, but it literally only takes 100% of the window. If you scroll down, the div does not continue. Instead the content spills out into an open page. The div literally is restricted to the size of the window. If scroll down so that you can see the bottom edge of the window, then resize the window, you can see the div resizing in real time.

    At first it seemed like maybe it was a problem with floats being cleared. But there are only two objects floating and they're both cleared immediately afterwords.

    Here's my CSS as of right now:
    html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}
    /* GENERAL
    html {height:100%}
    body{ margin:0 0 0 0; height:100%; min-height:100%; background-color:#454545;background-image:url(images/bg-right.gif); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:12px; letter-spacing:1px; color:#454545;}
    a {color:#333; text-decoration:underline;}
    a:hover {color:#39F; text-decoration:none;}
    .clear {clear:both}
    #content {width:1000px; height:100%; }
    #left {width:550px; height:100%; float:left; background-color:#FFF; background-image:url(images/bg-bluehaze.gif); background-repeat:repeat-x;}
    #right_shadow {width:54px; height:100%; background-image:url(images/bg-rightedge-bottom.gif); background-repeat:repeat-y; float:left;}
    /* HEADER
    #menu {margin: 10px 0 50px 20px; font-size:10px; text-transform:uppercase; letter-spacing:1px;}
    #menu ol li {display:inline;}
    #menu a {padding:0 5px 0 0; text-decoration:none;}
    #menu a:hover {text-decoration:underline;}
    #title {margin:0 0 0 20px;}
    #twitter {font-size:10px;}
    /* CONTENT
    .post {margin: 100px 25px 0 25px;
    Does anyone know what's going on here?

  2. #2
    Join Date
    Nov 2008
    I dont know whats going on, I'm not going to try to fix your code because I'm not so good at CSS and I find it VERY difficult to manage div heights :-(
    It sounds like you are aiming for a sticky footer and its not working so I will point you in the direction of Ryan Fait. A rather snazzy designer and coder.
    His sticky footer is nice and tidy - I used his code after spending about 3 days just trying to make a sticky footer :-)

    Ryan Fait - CSS Sticky Footer

  3. #3
    Join Date
    Jul 2008
    Yeah, I messed with the sticky footer, but it seems to produce the same problem. Does anyone know what's going on here?

  4. #4
    Join Date
    Jul 2008
    Any more ideas?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
HTML5 Development Center