頁眉和頁腳之間的div大小問題

一段時間後，我繼承了一個頁面進行一些調整，這些頁面已經被大量手動定位和大小的元素一起拋出，導致看起來馬虎似的佈局。我已經做了一些改變，清理了一些東西（並使其在瀏覽器中看起來一致，這是請求的主要部分）。這是一個JSfiddle that has more or less the result.頁眉和頁腳之間的div大小問題

我從那以後就決定讓頁面調整或多或少地優雅地調整自己，因爲這個頁面被用在具有各種長寬比的環境中。我的目標是讓下面的部分具有固定的高度，textarea擴大以填充空間，然後地圖消耗垂直空間的其餘部分。我之前通過將頁腳設置爲％高度，並將內容設置爲100％減去該數量來實現此目的，但我試圖在此處獲得固定高度的頁腳。我跟蹤了幾個樣本，看起來應該是沒有成功的。 Here's a modified JSfiddle where I'm currently at。

CSS最相關的程度與我目前正在爲如下工作（見整版的jsfiddle）：

html, body { 
    height:100%; 
    margin: 0; 
} 

#page { 
    position: relative; 
    width:  100%; 
    height:  100%; 
    background: black; 
    text-align: center; 
} 

#titleBar { 
    display: table; 
    width:100%; 
    height: 60px; 
    background:lightgray; 
} 

#mapWrapper { 
    background:lightblue; 

    position:relative; 
    margin-bottom: 250px; 

    /* need to specify some sort of height to get this to appear*/ 
    /* would be great if I could say "100% - 60px - 240px" */ 
    height:200px; 
} 

#entireBottomBar { 
    position:absolute; 
    bottom:0; 
    left:0; 
    height:auto; 
    width:100%; 
    margin-top: 0; 
    margin-bottom: 0; 
}

要清楚，我怎樣才能使地圖div擴大，以填補頁面的完整垂直高度，而不覆蓋/落在頁眉和/或頁腳後面。

來源

2016-11-30 SkoobyDoo

對不起....有什麼問題嗎？ – Scott

當頁面的瀏覽器窗口展開時，您是否希望避免出現在頁面中間的黑色背景區域？ – JohnH

*「我自此以後決定讓頁面自己調整或多或少地優雅，因爲這個頁面被用在具有各種縱橫比的環境中。」* - 你有沒有考慮過使用[Bootstrap]（http ：//getbootstrap.com/）？ –

我能在幾個步驟來實現：

裹在一個upperstuffdiv
設置upperstuffdiv大小邊界框上部兩個div，具有底部邊框頁腳的大小，並將框尺寸更改爲邊框（所以100％高度將減去專用於頁腳的空間）
以類似的方式，在uperstuffdiv中將mapwrapper設置爲具有與頁眉大小相同的頂部邊框（標題）
更改箱子大小，使尺寸100％wou ld正確的上邊框「
將標題div更改爲position：fixed，因爲我無法使float或z-index按照我期望在地圖上邊界上渲染的方式工作。

我仍然對聽取替代方法或我的方法的輸入/輸出感興趣。

來源

2016-12-01 00:31:46 SkoobyDoo

頁眉和頁腳之間的div大小問題

回答

相關問題