Question

一个非常愚蠢的问题（我认为），但为什么我的背景不在整个页面上？我只在页面顶部找到一个小酒吧。

我的代码：

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;
}

感谢您的帮助

Answer 1

解决方案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>

Answer 2

body {
background: #FF4632;
}

将.homepage替换为body

Answer 3

根本原因是因为在设置标题标签样式时，它不再位于＆＃34;主页＆＃34; div。

见这个JS小提琴 -

https://jsfiddle.net/tqok771m/

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

这是因为您使用了position: fixed;

一个简单的解决方案是在主页DIV上设置高度，如高度：1000px;

Answer 4

将背景颜色放在身体元素上，而不是div。

body {
    background: #FF4632;
}

背景不跨整页

4 个答案: