如何在html/css中製作一個有限尺寸的跨頁面背景

-1

我是一位自學的編碼員，爲我創建的非營利組織開發網站，並希望有一個頁腳來感謝上述非營利組織的贊助商。我試圖通過相對於我的網頁其餘部分更改其背景顏色來區分此部分和網站的其他部分。我試過了我能想到的所有東西，比如創建一個寬度爲100％，背景顏色不同的div/footer，但只爲包含文本的div部分添加背景顏色（文本看起來像用這種顏色突出顯示，而不是應用於整個div的純色背景）。我所有的研究結果都只能說明如何讓頁面的整個背景成爲特定的顏色，或者如何將樣式添加到水平線上，這兩者都不能幫助我（前者是因爲我想讓顏色與該顏色不同而後者則是因爲我無法將我想包括的內容/文本放在其上）。如果任何人都可以提供幫助，我們將非常感謝。謝謝！如何在html/css中製作一個有限尺寸的跨頁面背景

編輯：澄清已被要求。基本上，我爲我的網站創建了一個頁腳，我想看起來像是一個here，其底部橫跨頁面。我的問題是，我創建的div沒有足夠好地使頁面成爲一個堅實的欄。它更像是一種塊狀着色，只在包含文本的嵌套div中出現。我發佈了這個問題，因爲我無法找到任何關於如何用這樣的頁腳跨越頁面的指南，但添加了一個嵌套的div與我想要的顏色背景和100vm的寬度，將邊距設置爲0，並且隱藏溢出最終讓我完成我的意圖。希望這是足夠的澄清。我也很感激，如果我積累的downvote被刪除，或至少解釋;很難提高我的帖子，如果我不知道他們的問題

來源

2017-01-08 Bugsy

如果沒有您的問題的視覺示例，很難分辨確切的問題。但從它的聲音來看，您希望背景能夠擴展整個頁面的寬度，但不希望實際內容擴展整個寬度。爲了做到這一點，我將引入一個類，它表示你希望你的內容的寬度，並把這個類嵌套在你想要父類的頁腳（和頁面上的任何其他元素）內（即，頁腳）來擴展頁面的寬度，並且頁腳內的所有內容都包含在希望顯示內容的寬度內。下面是一個例子，其中我指的是.viewport。爲footer指定背景並在footer中嵌套.viewport將爲頁腳提供全角背景，同時將頁腳內嵌入的文本保留指定的寬度。

body { 
 
    margin: 0; 
 
} 
 
header { 
 
    background: #eee; 
 
} 
 
.viewport { 
 
    max-width: 960px; 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 
footer { 
 
    background: #171717; 
 
    color: #fff; 
 
} 
 
.section { 
 
    padding: 2em 0; 
 
}

<header class="section"> 
 
    <h1 class="viewport"> 
 
    This is a header 
 
    </h1> 
 
</header> 
 
<main class="section"> 
 
    <div class="viewport"> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    </div> 
 
</main> 
 
<footer class="section"> 
 
    <p class="viewport">This is a footer</p> 
 
</footer>

來源

2017-01-08 18:17:46

太棒了，謝謝！出於好奇，爲什麼.viewport的寬度是90％而不是100％？它似乎不會跨越頁面，但它的作品 – Bugsy

@Bugsy，因爲這是包裝頁面內容的元素。如果它是100％，那麼一旦你獲得<960px的內容，它的內容會碰撞到瀏覽器的兩側，而且看起來很糟糕，但是你可以放任何你想要的東西。我僅以960像素/ 90％爲例。 –

這裏是你速戰速決：

HTML

<div class="Footer"> 
    <div class="Content">Place you stuff here</div> 
</div>

CSS

.Footer{position:relative; width:100%; height:100px; display:block; float:left; background-color:RED;} 
.Footer > .Content{position:relative; margin:auto; width:80%; height:100%;}

來源

2017-01-08 18:15:18

最好最簡單的解決方案是使用bootstrap，但由於您沒有提及它，這意味着您沒有使用它。

<footer> 
    <div class="sponsors"> 
     Type anything you want 
    </div> 
</footer>

CSS：

.sponsors{ 
text-align:center; 
background-color:(your color); 

}

這應該工作，如果不告訴我哪裏出了問題！

來源

2017-01-08 18:16:22 evans

謝謝！我認爲我的問題是我直接向頁腳添加贊助商，而不是擁有一個包含div的頁面。 – Bugsy

如何在html/css中製作一個有限尺寸的跨頁面背景

回答

相關問題