960px容器，但全寬頁眉/頁腳上/下全屏bg圖像

-1

我正在主持一個Drupal網站和使用拉斯維加斯全屏bg。我想達到以下目的： enter image description here 但我有一些麻煩的主題是：我希望它總是顯示在背景圖片下（所以你必須向下滾動才能看到頁腳），現在它不斷出現背景圖。除此之外，我希望主菜單和頁腳變成全寬而不是960像容器一樣。但我似乎無法讓這兩個「爆發」容器。960px容器，但全寬頁眉/頁腳上/下全屏bg圖像

現在我：

#footer { 
    position: absolute; 
    bottom:0; 
    width: 100%; 
    height:100px; 
    background-color: #202020; 
} 

#primary-menu-bar{ 
    position: absolute; 
    width: 100%; 
    height: 60px; 
    padding: 0; 
    margin: 0; 
    background-color: rgba(255,255,255,0.70); 
    padding-top: 10px; 
}

通常這樣的事情確實的伎倆，但我掙扎得到這個權利...

任何人的任何意見或解決方案？

來源

2014-10-08 user3629755

如果'拉斯維加斯'的東西是應用bg圖像的身體（或HTML）...你不能這樣做。頁腳將永遠在一個或另一個。 – 2014-10-08 15:37:24

你能提供一些HTML嗎？基本上，你必須將#footer和＃primary-menu-bar放在容器的外面（這將是唯一的960像素）並將它們放在絕對位置。 – Monte 2014-10-08 15:40:32

你沒有表現出任何HTML，所以我只是想出了一些HTML自己。如果頁腳只在向下滾動時可見，則需要爲頁眉和內容元素提供某種包裝。然後，您可以將包裝min-height設置爲100％，並使用background-image/background-size獲取全屏圖像背景。

HTML：

<div class="wrapper"> 
    <header class="page-head" role="banner"> 
     Header 
    </header> 
    <main class="main" role="main"> 
     Content 
    </main> 
</div> 
<footer class="page-foot" role="contentinfo"> 
    Footer 
</footer>

CSS：

html, body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    background-image: url(http://placehold.it/1200x800); 
    background-position: center center; 
    background-size: cover; 
} 

.page-head { 
    background: red; 
} 

.main { 
    width: 80%; 
    margin: 0 auto; 
    background: yellow; 
} 

.page-foot { 
    background: blue; 
}

見本pen例子。

來源

2014-10-08 15:48:20 Daniel

使用了類似的解決方案，謝謝！ – user3629755 2014-10-10 15:51:41

對於我們來說這樣做對於使用HTML來說確實很難。

所以基本上你需要做的是將頁腳和頁眉放在容器外面。因爲容器是960px，所以頁眉和頁腳可以覆蓋它。

的結構應該是這樣的：

<body> 
    <header></header> 
    <div class="container"></div> 
    <footer></footer> 
    </body>

例如在codepen

來源

2014-10-08 15:43:37 Maverick

這裏是一個可能的解決方案：正如我在你的問題下面的評論說：http://jsfiddle.net/09mcoo2h/1/

：你需要有頁腳和頁眉在容器外（這是唯一的960px）

要有一個頁腳到底部該頁面，只需將body設置爲位置：相對。

HTML

<div id="primary-menu-bar"></div> 

<div id="container"></div> 

<div id="footer"></div>

CSS

body { 
    margin:0; 
    padding:0; 
    position:relative; 
} 

#container { 
    display:block; 
    width:960px; 
    height:1600px; 
    background:#eee; 
    margin:0 auto; 
} 

#footer { 
    position: absolute; 
    bottom:0; 
    width: 100%; 
    height:100px; 
    background-color: #202020; 
} 

#primary-menu-bar{ 
    width: 100%; 
    height: 60px; 
    top:0; 
    background-color: #F00; 
    padding-top: 10px; 
}

來源

2014-10-08 15:45:47 Monte

960px容器，但全寬頁眉/頁腳上/下全屏bg圖像

回答

相關問題