粘性页眉页脚，需要可滚动的内容（水平+垂直）

Question

这是我一直试图获得的布局：

固定的标题[高度为150像素] =>标题内，在最右端有两个宽度为60像素的文本框（一个在另一个下方）。

页眉和页脚之间的内容可以滚动。

粘性页脚[高度为50像素]

因此，我遇到的问题是当我最小化屏幕时，没有启用任何右滚动。 因此，我无法在标题右侧的文本框中输入。

=>如果设置了overflow-x：scroll，则启用正确的滚动，但是每个div都有滚动条，这会使页面看起来很糟糕。

有人可以帮我一种干净的方法吗？

我的代码是：

#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%; 
}

谢谢您的帮助。

Answer 1

这是一个简单的脚本，当调整窗口大小时，您可以使用它作为触发器来更改元素的属性，例如标题宽度，div宽度等。

window.onresize = function(event) {

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

}