www.webdeveloper.com
Results 1 to 6 of 6

Thread: 100% width & height for div even with window resize - shadow/scrollbar trouble

  1. #1
    Join Date
    Jan 2011
    Posts
    9

    Question 100% width & height for div even with window resize - shadow/scrollbar trouble

    I'm trying to build a background in two parts. The header bg is in the body and the lower part is a div with a gradient background color generated by CSS3 or IE filters. I had problems with getting the gradient to stretch all the way to the side in IE7 with plain CSS so I had to start looking for more watertight solutions.

    Applied the jQuery advice in this: http://stackoverflow.com/questions/1...-height-to-div

    Like this:
    Code:
        $(function() {
        $(window).resize(function() {
            $('.wrapperala').height($(window).height() - $('.wrapperala').offset().top - ($('.wrapperala').outerHeight(true) - $('.wrapperala').height()));
            $('.wrapperala').width($(window).width() - $('.wrapperala').offset().right - ($('.wrapperala').outerWidth(true) - $('.wrapperala').width()));
        });
        $(window).resize();
    });
    I have shadows in the div that is over the gradient div I'm stretching and somehow the gradient won't stretch under the shadows when there are scrollbars:
    http://img407.imageshack.us/img407/1924/weirdmargin.jpg

    There is not much difference in FF vs. IE, I've only made the FF screenshot have one scrollbar to show how it stretches fine on the axis without one.

    This is the hierarchy, first is bodywrapper, then the content (#sisalto) is inside the gradient div (.wrapperala):
    Code:
    html {
    height: 100%;
    width: 100%;
    }
    body {
    background: #fff;
    height: 100%;
    width: 100%;
        background: url('../kuvat/laatat_edit.jpg') repeat;
    }
    
    #bodywrapper {
      position:absolute;
      top: 0px;
      left: 0px;
      width:100%;
      min-width: 100%;
      width:auto !important;
      min-height: 100%;
      height:auto !important;
      height:100%;
      z-index: 1;
    }
    
    .wrapperala {
        background: #000000; /* old browsers */
        background: -moz-linear-gradient(#4C3E2E 1%, #B7956E 3%, #F78F20 50%, #FFD059 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B7956E), color-stop(90%,#F78F20), color-stop(100%,#FFD059)); /* webkit */
        -pie-background: linear-gradient(#3F9FFF, #FFD059);  /* PIE */
        behavior: url(htc/PIE.htc);
        padding: 0;
        margin: 0;
    }
    
    #sisalto {
        clear: left;
        position: relative;
        z-index: 1;
        padding: 2em 1em;
        border: 1px solid #AAA;
        background: #EEE;
        -webkit-box-shadow: -5px 9px 1em rgba(0,0,0,0.5), 5px 9px 1em rgba(0,0,0,0.5);
        -moz-box-shadow: -5px 9px 1em rgba(0,0,0,0.5), 5px 9px 1em rgba(0,0,0,0.5);
        box-shadow: -5px 9px 1em rgba(0,0,0,0.5), 5px 9px 1em rgba(0,0,0,0.5);
        behavior: url(htc/PIE.htc);
         width:980px; margin-left:auto ;margin-right: auto ;text-align: left;
    }
    If there are easier methods to solve this split background thing than JavaScript, I'm all ears. I can PM the address of the website, if someone wants to take a look.

  2. #2
    Join Date
    Jan 2011
    Posts
    9
    I realized I have to make the jQuery take always into account the width and height of the content div (#sisalto). So even if the window is smaller than the content dimensions, the gradient div retains a sufficient w&h to go under the shadows (maybe adding the shadow thickness). My brain is kind of sore right now, so if anyone wants to help on how to say this in jQueryese, I would be thankful.

  3. #3
    Join Date
    Jan 2011
    Posts
    9
    I started with a basic implementation, without binding it to the window size changes. This static solution (almost) works in FF 3.6, but not in IE:

    Code:
    $(function()
    {
    if (($(window).width()) > (($('#sisalto').width()) + 72))
    {
            $('.wrapperala') .css({'width': ($(window).width())+'px'});
    }
    else
    {
            $('.wrapperala') .css({'width': (1052)+'px'});
    }    
    if (($(window).height()) > (($('#sisalto').height()) + ($('#footer').height()) + 154))
    {
            $('.wrapperala') .css({'height': (($(window).height()) - 154)+'px'});
    }
    else
    {
            $('.wrapperala') .css({'height': (($('#sisalto').height()) + ($('#footer').height()) + 85)+'px'});
    }
    });
    I noticed I'm having a hard time finding the right values to add and subtract, so it doesn't work in FF either with certain window heights.

    IE throws my tabs carelessly to the side as you can see:
    http://img529.imageshack.us/img529/7262/ietabbug.jpg

    That silly old IE also wants to interpret pixels in its own curious way, so I believe I would have to specify them in em or make IE run a different version of the script with modified px values. I have never tried to program anything in JS before this btw.

    Here's the styling for the list that makes up the tabs:

    Code:
    #tabit {
        margin: 0;
        padding: 0 10px;
        overflow: hidden;
        margin-bottom: -1px;
        height: 2.55em;
        width:980px; margin-left:auto ;margin-right: auto ;text-align: left;
        z-index: 1;
     }
     #tabit li {
         float: left; 
        list-style: none;
        margin: 0;
        padding: .25em  0;
        height: 2em;
        overflow: hidden;
        position: relative;
        z-index: 1;
        border-bottom: 1px solid #EEE; 
     }
    #tabit a {
        float: left;
        height: 1.75em;
        line-height: 1.75em;
    		color: #132401;
        background: #e1e4f2; /* old browsers */
    background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 15%, #e1e4f2 16%, #bdbdbd 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(15%,#f5f5f5), color-stop(16%,#e1e4f2), color-stop(100%,#bdbdbd)); /* webkit */
        background-image: linear-gradient(top, #f5f5f5, #bdbdbd);
        -pie-background: linear-gradient(#f5f5f5, #bdbdbd);  /* PIE */
    		font: 20px/27px 'VegurBold', Arial, sans-serif;
        border: 1px solid #AAA;
        border-bottom: 0;
        padding: 0 10px;
    		text-decoration: none; 
        behavior: url(htc/PIE.htc);
        z-index: 1;
        }

  4. #4
    Join Date
    Jan 2011
    Posts
    9
    Ok I finally solved this using another approach and ditching the CSS/filters generated gradient for a 1px wide image in the process:

    Code:
    body {
      background: url('../kuvat/alagradient.jpg') repeat-x 0 9.4em #FFD059;
    }
    
    #bodywrapper {
      position:absolute;
      top: 0px;
      left: 0px;
      padding: 0 2em 0 2em;
      width:100%;
      min-width: 100%;
      width:auto !important;
      min-height: 100%;
      height:auto !important;
      height:100%;
      z-index: 1;
    }
    
    .headerbg {
    position:absolute;
      top: 0px;
      left: 0px;
    background: url('../kuvat/headertile.jpg') repeat #fff;
    z-index:-1;
    display:inline;
    }
    Side paddings make the shadow problem irrelevant.

    Code:
    $(function()
    {
    $('.headerbg').width($('#bodywrapper').outerWidth(true));
    
            $('.headerbg').height($('#sisalto').offset().top);
                
            $(window).bind('resize', function(){
    $('.headerbg').width($('#bodywrapper').outerWidth(true));
       
            });
            $('.headerbg').height($('#sisalto').offset().top);
    });
    The funny thing is, FF acts weird and stretches the #bodywrapper somewhat beyond 100% width, if the window width exceeds the side paddings. Opera and IE6 look fine.

  5. #5
    Join Date
    Jan 2011
    Posts
    9
    Now I noticed Opera has a small right margin for the header that goes away with window resize. And if I change the content width from 980px to 900px, FF messes up its calculations and the header height becomes almost 100px too big. Well, luckily I'm fine with 980px.

  6. #6
    Join Date
    Jan 2011
    Posts
    9
    Ok I managed to put together a final solution. It's funny, that in Safari the headerbg doesn't quite reach the right side on initial page load, but Chrome works fine!

    Code:
    $(function()
    {
    if ($(window).width() > 1042)
    {
    $('#bodywrapper').padding({right: 0}).padding({left: 0});
    }
    $('.headerbg').width($('#bodywrapper').outerWidth(true));
    
            $('.headerbg').height($('#sisalto').offset().top);
                
    
            $(window).bind('resize', function(){
            if (($(window).width() < 1042) && ($('#bodywrapper').padding().left < 32))
    {
    $('#bodywrapper').padding({right: 32}).padding({left: 32});
    }
            });
            $(window).bind('resize', function(){
            if (($(window).width() > 1042) && ($('#bodywrapper').padding().left > 30))
    {
    $('#bodywrapper').padding({right: 0}).padding({left: 0});
    }
            });
            $(window).bind('resize', function(){
    $('.headerbg').width($('#bodywrapper').outerWidth(true));
            });
            $('.headerbg').height($('#sisalto').offset().top);
    });

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



Recent Articles