使用位置的簡單的div佈局

讓我們看看我能否正確解釋這一點。我想要一個標題，總是可見的AND內容和一個隱藏在內容後面的頁腳，當滾動到頁腳時變得可見。這裏是我迄今爲止...使用位置的簡單的div佈局

#container { 
 
\t height:100%; 
 
\t width:100%; 
 
\t position:relative; 
 
    } 
 

 
    #top { 
 
\t height:25vh; 
 
\t width:100%; 
 
\t background-color:red; 
 
\t position:fixed; 
 
\t top:0; 
 
    } 
 

 
    #content { 
 
\t height:120vh; 
 
\t width:100%; 
 
\t background-color:green; 
 
\t position:relative; 
 
    } 
 

 
    #bottom { 
 
\t height:35vh; 
 
\t width:100%; 
 
\t background-color:blue; 
 
\t position:fixed; 
 
\t bottom:0; 
 
    }

<div id="container"> 
 

 
\t <div id="top"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="bottom"> 
 
\t 
 
\t </div> 
 

 
    </div>

這段代碼目前並：頭背後隱藏的內容和頁腳總是可見的重疊內容。

這是當前測試頁... http://next-factor.com/test-layout.php

太大的幫助是極大的讚賞。謝謝！

來源

2015-04-16 Donald Faulknor

在所有3個css類中添加z-index。 z-index幫助您管理重疊 –

給予z-index在#top

#top { 
    background-color: red; 
    height: 25vh; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 999; 
}

它會使頭部可見。

和#bottom

#bottom { 
    background-color: blue; 
    bottom: 0; 
    height: 35vh; 
    width: 100%; 
}

希望刪除position:fixed這將解決您的問題

這裏是我加入填充頂部的容器中，使得內容在這個例子中，工作示例http://jsfiddle.net/a3ru9d4d/

容器內部不會隱藏在標題後面。

來源

2015-04-16 05:55:53

看看這個。我已經介紹了兩個新的CSS定義，可以達到我想要的效果。

https://jsfiddle.net/b8my8h5j/

我加z-index定義。索引越高，它在非靜態定位堆棧中就越高。內容標題有30，所以它在內容上面出現在20以上，但頁腳有10，所以t始終在後面。
我在內容中添加了一個margin-bottom，以便您有空間向下滾動並使頁腳完全可見。

更新： https://jsfiddle.net/b8my8h5j/1/

也被清除填充/保證金對身體和HTML標記，以便塊組合在一起緊貼。
爲內容添加了邊距頂部，以便綠色框的頂部可見。

來源

2015-04-16 05:56:10 Josh

這似乎確實是我想要的。謝謝！但我很困惑，爲什麼內容沒有跨越整個100％。你看到綠色右邊的空白處？ –

我需要閱讀z-index。我一直在使用它，但從未真正理解它的用途。 –

看看我的更新：https://jsfiddle.net/b8my8h5j/1/ - 我刪除了頁面的自然填充和邊距，以便元素貼合。我還爲內容添加了邊距頂部，以便綠色框的頂部可見。 – Josh

我想你想是這樣的： -

*{margin:0;padding:0} 
 
#container { 
 
\t height:100%; 
 
\t width:100%; 
 
\t position:relative; 
 
    } 
 

 
    #top { 
 
\t height:25vh; 
 
\t width:100%; 
 
\t background-color:red; 
 
\t position:fixed; 
 
\t top:0; 
 
\t z-index: 1; 
 
    } 
 

 
    #content { 
 
\t height:120vh; 
 
\t width:100%; 
 
\t background-color:green; 
 
\t position:relative; 
 
    } 
 

 
    #bottom { 
 
\t height:35vh; 
 
\t width:100%; 
 
\t position:relative; 
 
\t z-index:-2; 
 
\t background-color:#31353a; 
 

 

 
    }

\t <div id="top"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t 
 
\t </div> 
 
\t 
 
\t \t <div id="bottom"> 
 
\t \t Footer \t 
 
\t \t </div> 
 

 
    </div>

我希望它會幫助你。

來源

2015-04-16 05:58:52

我認爲這會產生你想要的東西：在所有三個Z-指標，並在content底部騰出頁腳完全顯示當您滾動到頁面

#container { 
 
    height:100%; 
 
    width:100%; 
 
    position:relative; 
 
} 
 

 
#top { 
 
    height: 25vh; 
 
    width: 100%; 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 3; 
 
} 
 

 
#content { 
 
    height: 120vh; 
 
    width: 100%; 
 
    background-color: green; 
 
    position: relative; 
 
    margin-bottom: 33vh; 
 
    z-index: 2; 
 
} 
 

 
#bottom { 
 
    height: 35vh; 
 
    width: 100%; 
 
    background-color: blue; 
 
    position: fixed; 
 
    bottom: 0; 
 
    z-index: 1; 
 
}

<div id="container"> 
 

 
\t <div id="top"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="bottom"> 
 
\t 
 
\t </div> 
 

 
    </div>

結束

來源

2015-04-16 06:05:28 rainbowsorbet

使用位置的簡單的div佈局

回答

相關問題