置頂頁眉頁腳，極品滾動內容（水平+垂直）

固定頭[具有150像素的高度] =>裏面的頭，它有兩個文本框在最右端（一個在另一個的下方）寬度爲60px。

頁眉和頁腳之間的內容可以滾動。

粘性尾[已高度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%; 
}

感謝您的幫助。

來源

2014-02-09 user2231191

你有沒有嘗試在頭上添加一個「min-width」？這可能會使頁面在某個時候滾動。 –

你可以加你html標記嗎？ – VIDesignz

捏和縮放並不總是將寬度重置爲當前縮放的100％。你瘋狂的需要在'.resize（）'觸發器上使用一些js。另外，您應該真正使用@media查詢來進行響應式設計。液體設計（百分比）並不總是預示粘性頁眉/頁腳。 – VIDesignz

下面是一個簡單的腳本，當窗口大小，你可以使用它作爲觸發改變的元素，比如頭寬度，寬度DIV等特性..

window.onresize = function(event) { 

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

}

來源

2014-02-09 05:50:57 VIDesignz

沒有，也沒有工作：（ – user2231191

@ user2231191我的答案不是一個解決方案「原樣」..它更多的是一種技術。我只是不太明白你的問題/目標是什麼，所以它對我來說很難爲您提供解決方案。 – VIDesignz

置頂頁眉頁腳，極品滾動內容（水平+垂直）

回答

相關問題