背景不是整個頁面

一個非常愚蠢的問題（我認爲），但爲什麼我的背景不是整個頁面？我只在頁面頂部找到一個小欄。背景不是整個頁面

我的代碼：

的Html

<body> 
<div class="homepage"> 
<div class="headtext"> 
<h3>Text1</h3> 
<h5>Text2</h5> 
</div> 
<div class="input"> 
<input> </input> 
</div> 
</div> 
</body>

的CSS

* { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 
} 

.homepage { 
background: #FF4632; 
} 

.headtext { 
position: fixed; 
left: 50%; 
transform: translate(-50%, 0); 
top: 25%; 
} 

.headtext h3 { 
text-align: center; 
font-family: 'Questrial', sans-serif; 
} 

.headtext h5 { 
text-align: center; 
font-family: 'Questrial', sans-serif; 
}

謝謝你幫我

來源

2016-12-07 Julian

在瀏覽器中呈現時，您的HTML代碼（以及每個人）都未佔滿整個頁面。如果您爲頁面添加特定的背景顏色，則只會將此背景顏色放置在'.homepage'元素和所有子元素的背景中。您需要一種將背景顏色應用於整個頁面的方法，例如在''標籤上，所以不要在'.homepage'上應用背景，而是最終將它應用於'html'。見[這裏]（http://www.quackit.com/html/codes/html_background_codes.cfm） – Artemis

加高度：100vh;到類.homepage，使其擴大到所有屏幕 – Chiller

解決方案1：position:fixed;的.homepage

給position:fixed; height:100%;width:100%;到.homepage背景顏色應用到整個身體

* { 
 
margin: 0; 
 
padding: 0; 
 
border: 0; 
 
outline: 0; 
 
font-size: 100%; 
 
vertical-align: baseline; 
 
background: transparent; 
 
} 
 

 
.homepage { 
 
background: #FF4632; 
 
    position:fixed; 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
.headtext { 
 
position: fixed; 
 
left: 50%; 
 
transform: translate(-50%, 0); 
 
top: 25%; 
 
} 
 

 
.headtext h3 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
} 
 

 
.headtext h5 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
}

<body> 
 
<div class="homepage"> 
 
<div class="headtext"> 
 
<h3>Text1</h3> 
 
<h5>Text2</h5> 
 
</div> 
 
<div class="input"> 
 
<input/> 
 
</div> 
 
</div> 
 
</body>

解決方案2：應用背景色到全身

* { 
 
margin: 0; 
 
padding: 0; 
 
border: 0; 
 
outline: 0; 
 
font-size: 100%; 
 
vertical-align: baseline; 
 
background: transparent; 
 
} 
 

 
body{ 
 
background: #FF4632; 
 
} 
 

 
.headtext { 
 
position: fixed; 
 
left: 50%; 
 
transform: translate(-50%, 0); 
 
top: 25%; 
 
} 
 

 
.headtext h3 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
} 
 

 
.headtext h5 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
}

<body> 
 
<div class="homepage"> 
 
<div class="headtext"> 
 
<h3>Text1</h3> 
 
<h5>Text2</h5> 
 
</div> 
 
<div class="input"> 
 
<input/> 
 
</div> 
 
</div> 
 
</body>

來源

2016-12-07 19:16:04 jafarbtech

謝謝！ :-)我現在感到很蠢。 – Julian

把背景顏色你的身體元素，而不是在div上。

body { 
    background: #FF4632; 
}

來源

2016-12-07 19:09:54

body { 
background: #FF4632; 
}

與body

來源

2016-12-07 19:16:45

更換.homepage的根本原因是因爲當你造型的標題標籤，它不再位於「主頁」div之內。

見這個JS小提琴 -

https://jsfiddle.net/tqok771m/

.headtext { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, 0); 
    top: 25%; 
}

這是由於您使用的position: fixed;

一個簡單的辦法是設置一個高度上的東西，如高度主頁DIV： 1000像素;

來源

2016-12-07 19:17:02

背景不是整個頁面

回答

相關問題