粘性頁眉頁腳，需要可滾動的內容（水平+垂直）

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 });

}