創建與使用最多的空間

我正在做一些移動HTML &想有一個使用了它的空間100％的div的其餘部分固定的底部一個div，但不能使用了它的容器它有3周的div其分解成3個部分，並具有以下佈局：創建與使用最多的空間

enter image description here

我怎麼能做到這一點使用div的，我一直在努力，但有個固定高度的div是混亂的。我可以用水平對齊的方式來做，但是垂直方向會讓我困惑。我不希望它通過使底部絕對重疊來重疊。

編輯

的剩餘空間本質上只是一個大的div具有使用了整個空間的overscroll-y

我必須把佈局，這是標題欄下方的部分爲什麼我不能使用position: fixed，因爲它會干擾父容器。

enter image description here

來源

2013-03-04 Akshat

我會繼續並建議'display：table' /'display：table-row' – 2013-03-04 16:31:34

經典的解決方案是'position：fixed'和正確的邊距到主要內容 – 2013-03-04 16:33:09

看起來就像我要找的東西！但是，如何讓中間一個使用空間的其餘部分 – Akshat 2013-03-04 16:33:13

首先，在你編輯的問題，圖像可能是從jQuery Mobile的來了。考慮使用jQuery移動。這也可能是一個選擇。

<style type="text/css"> 
    #container{position: relative; width: 100%; height: 100%; background-color:#ddd; z-index:1;} 
    #header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;} 
    #footer{position: fixed; bottom:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:4;} 
    #content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;} 
</style> 

<div id="container"> 

<div id="header"> 

</div> 

<div id="content"> 
    Put body content here... 

</div> 

<div id="footer"> 

</div> 

</div>

你可能需要jQuery來爲它加油。這應該給你基本的想法。

來源

2013-03-04 16:33:35

如何防止重疊？ – 2013-03-04 16:34:15

在中間即時將放置一個div有一個overscroll所以它必須使用該空間的100％，在這個頁腳將與中間部分重疊 – Akshat 2013-03-04 16:38:06

我已更新的樣式，增加了填充頂部和底部。你也可以使用利潤率。將其設置爲80像素或更高 – 2013-03-04 16:44:42

http://jsfiddle.net/wy6rS/1/

<div id="toolbar">This is fixed toolbar.</div> 
    <div id="wrap"> 
    <div id="header">This is the header</div> 
     <div id="content">Content will Expand with scripting. Notice the push.</div> 
     <div id="push"></div> 
    <div> <!--wrap ends here--> 
<div id="footer">This is the footer</div>

推使房間粘頁腳。 #wrap注意等於負邊距。

#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; } 
#toolbar { position:fixed; top:0; width:100%; height:50px; } 
#header { height: 140px; } 
#content { min-height:300px; height:100%; } 
#push, #footer { height:80px; } /* Must be same height as footer */

然後你需要腳本擴展內容。檢查jsfiddle。它將在一個真實的頁面中工作。

來源

2013-03-04 16:43:04

創建與使用最多的空間

回答

相關問題