力絕對定位的div不重疊

我有一個使用position:absolute;定位在頭吧，我似乎無法得到它的不重疊我的內容。力絕對定位的div不重疊

enter image description here

這裏是我使用我的例子中的HTML：

<div class="ui-page ui-page-active"> 
    <div class="ui-header"> 
     <div class="ui-title ui-title-h1"> 
      Page Title 1 
     </div> 
    </div> 
    <div class="ui-content"> 
     <a href="#pg-two">Page Two</a> 
    </div> 
    <div class="ui-footer"> 
     <div class="ui-title ui-title-h3"> 
      Page Footer 1 
     </div> 
    </div> 
</div>

，這裏是我的CSS

html,body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.ui-page { 
    background-color: #bbb; 
    height: 100%; 
    width: 100%; 
    display: block; 
    position: relative; 
} 
.ui-page-inactive { 
    display: none; 
} 
.ui-page-active { 
    display: block; 
} 
.ui-header { 
    position: absolute; 
    top: 0; 
    background-color: #000; 
    width: 100%; 
    display: inline-block; 
} 
.ui-content { 

} 
.ui-footer { 
    position: absolute; 
    bottom: 0; 
    background-color: #000; 
    width: 100%; 
    display: inline-block; 
} 
.ui-title { 
    text-align: center; 
    color: #fff; 
    padding: 4px; 
    line-height: 150%; 
} 
.ui-title-h1 { 
    font-size: 1.5em; 
    font-weight: 900; 
}

我的最終目標是擁有一個標題欄總是在頂部，一個頁腳欄總是在底部，內容填充中心。內容div不實際上需要填寫100％，我只是不希望它被頁眉或頁腳阻止。

來源

2011-09-28 rlemon

整個事情是否應該適合瀏覽器窗口的大小？ – thirtydot

100％寬度，100％最小高度|但高度可以擴大到+ 100％的視口。這將在移動設備上查看。 – rlemon

一個簡單的方法是將.ui-content設置爲您的標題的高度，將padding-top或margin-top（我不確定是哪個），這會將.ui-content向下推不重疊。

來源

2011-09-28 19:10:01

我希望不必這樣做。有沒有顯示性質的組合，將允許我做我在找什麼？ – rlemon

有幾種方法可以完成你想要做的事情，我說的是最簡單的方法。另一種方法是將所有div浮動到左側，然後標題將保持在最前面。另一種方法是將ui內容絕對定位，並且可能有十幾種方法可以實現。但我不知道有什麼魔法組合會阻止它們重疊。有點頂部填充/邊距有什麼問題？ –

沒什麼。你知道什麼時候你腦海中有了一個想法。你想做一些沒有或沒有特定標準的事情......但是沒有真正的推理呢？ – rlemon

如果頁眉和頁腳是固定高度（例如「80px」），那麼您可以使用絕對頂部和底部邊距（position：absolute; overflow-y：scroll; top ：80px; bottom：80px;）並使頁眉和頁腳固定（position：fixed; height：80px; top：0; left：0; right：0; overflow：hidden;爲標題和位置：fixed; height： 80px; bottom：0; left：0; right：0; overflow：hidden;對於頁腳）

類似的東西可能會有效。

來源

2013-04-09 23:00:41 Amanda

力絕對定位的div不重疊

回答

相關問題