窗體頁固定的高度和響應

Question

，我有以下的佈局，我需要解決

我明白，響應式設計的整體思路是離開的高度調整到內容，但對於這件作品的客戶想要這種方式，不管我怎麼想出來，但我努力實現它

在我的樣機，我有一個100％身高和體重的身體，然後一個容器採取85％身高尺寸。

內部的容器有以下要素：

1. 與公司徽標中的頂格容器
2. 進度條與步數
3. 小格用的一些指令當前步
4. 包含用戶必須填寫的表單元素的Div
5. 帶2個導航按鈕的底部div

內容應始終可見無論使用的設備（見下圖） 數4.有overflow-y一個內滾動條，因爲這些內容會改變

爲了要做到這一點，我設置容器內每個div的百分比（％）的高度，但我需要一些填充的元素，但是當瀏覽器調整大小或設備更改高度和寬度時，元素相互重疊

我不想依賴一堆媒體查詢來解決這個問題。我不知道是否有人能找到這個辦法還是有一定的參考，因爲我似乎無法找到它

感謝

Answer 1

如果你不想使用很多媒體的質疑，我認爲你應該使用jQuery（或Javascript）是這樣的：除了FORM CONTENT所有div的

• 固定高度（包括填充，保證金，邊境box-sizing: border-box）。您可以使用一些媒體查詢來獲得最佳風格。
• 使用jQuery來計算FORM CONTENT高度（這是滾動內容）

例子：

$('#form-content').height($(window).height() - X); 

// With X = total height of other divs includes margin, padding, border 

調用此腳本$(document).ready(...)和$(window).resize(...)

希望這有助於。