Changing a Header's coloured background height when resizing browser

Question

I have a simple webpage with a fixed header and footer. The header has a blue background, the body has a white background, and the footer has a black background.

When I resize the browser to a smaller size, the header's blue background does not change height, but the content spills over into the body (I am using Dreamweaver's Fluid Grid Layout). This results in the header's content looking like it has spilled out of the header, because the background's height does get larger, which I need it to.

CSS:

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:   25;

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design

    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv4 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv5 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv6 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv7 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv10 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv4 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv5 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv6 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv7 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv10 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv4 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 18.3673%;
    display: block;
}
#LayoutDiv5 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#LayoutDiv6 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#LayoutDiv7 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv10 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

@charset "utf-8";
/* CSS Document */

.gridContainer {
    margin-left: 0px;
    width: 100%;
    padding-left: 0px;
}   

body {
    margin: 0px;
}

#LayoutDiv1 {
    position: fixed;
    height: 70px;
    top: 0px;
    width: 100%;
    z-index: 10000;
    background: #FFF;
    font-size: 70px;
    color:#FFF;
    background-color: #069;
}

#LayoutDiv2 {
    position: fixed;
    height: 30px;
    top: 70px;
    width: 100%;
    z-index: 10002;
    color: #FFF;
    background-color: #069;
    }

#LayoutDiv3 {

    margin-top: 135px;

    }

#LayoutDiv9 {
    position: fixed;
    height: 40px;
    width: 100%;
    z-index:10006;
    background:#FFF;
    max-height: 100px;
    bottom: 15px;
    color: #FFF;
    background-color: #000;
    }

#LayoutDiv10 {

    position: fixed;
    height: 15px;
    width: 100%;
    z-index:10008;
    background:#FFF;
    bottom:0px;
    max-height: 60px;
    color: #FFF;
    background-color: #000;
    }

HTML:

<body>
<div class="gridContainer clearfix">
    <div id="LayoutDiv1">Hello Welcome this is an example of the kind of content that I will input when using my real html. For now I am just trying to get something large enough that is going to effectively spill over into the content. </div>
  <div id="LayoutDiv2"></div>
  <div id="LayoutDiv3"></div>
  <div id="LayoutDiv4"></div>
<div id="LayoutDiv9">Goodbye</div>

<div id="LayoutDiv10"></div>
</div>
</body>

Answer 1

have you think to use jQuery ?

$.(windows).resize(function(){
if (windows.hight > XXX ...
      //then ...
});