Sticky header footer, Need for scrollable content (horizontal + vertical)

Question

This is the layout that I have been trying to get:

Fixed header [has 150px height] => Inside the header it has two text boxes of 60px width at the far right end (one below the other).

Content in between header and footer can scroll.

Sticky footer [has 50px in height]

So, the problem I am running into is when I minimize the screen, there is no right scrolling that is enabled. So I am not able to enter in the text box on the right side of the header.

=> If it set overflow-x:scroll, the right scrolling gets enabled, but every div gets a scrollbar, which makes the page look bad.

Can someone help me a clean way to do this ?

The code I have is:

#Header {
  position: absolute;
  top: 0px; 
  left: 0px;
  height: 150px;
  width: 100%; 
}

// Spacing for the text box in right side, inside the header
#Right spacing {
  position: relative;
  left: 70%;
  height: 100%;
}

// Input box of 60px width
.input {
   width: 60px;
   margin-top: 6px;
   border: 1px solid #999;
   padding: 10px;
   color: #999;
}

// Right spaced content in between header and footer
#Content {
   margin: 0px 40px 0px auto;
   min-height: 100%
   position: absolute;
   padding-top: 150px;
   width: 300px;
   right: 60px;
   height: 100%;
}

#Footer {
  position: fixed;
  bottom: 0px; 
  height: 50px;
  left: 0px;
  width: 100%; 
}

Thanks for the help.

Answer 1

Here is a simple script that when the window is resized, you can use that as a trigger to change properties of elements, such as header width, div widths and so on..

window.onresize = function(event) {

    var newWidth = $(window).width();
    $('#header').css({'width': newWidth });

}