我有这个div元素，我将其用作添加到body元素的图像的第二个背景，但它从未正常工作，因为底部的长度永远不匹配。 这是屏幕截图。
我确实让它工作过一次，但是当我修改任何其他元素时，它总是会搞砸。 我在宽度方面也有同样的问题。 我希望你能帮忙，因为我被困住了。
我的 CSS：
html, body {
height: 100 % ;
width: 100 % ;
margin: 0;
padding: 0;
}
body {
background: url('../images/choc1.jpg');
font - family: arial,
Myriad pro,
sans serif;
color: #1E1B1B;
background-repeat: no-repeat;
background-attachment: fixed;
padding:0;
margin:0;
}
# page {
width: 1233.5 px;
background - color: rgba(255, 255, 255, 0.7);
position: absolute;
margin - left: 60 px;
margin - right: 0 px;
margin - bottom: 0 px;
padding: 0 px;
min - height: 100 % ;
}
我的网页：
<body>
<div id="page">
</div>
所以我写了一个应该对你有帮助的例子。
因此，您将页面div设置为绝对位置元素，这使得很难将其放置在其他对象中。绝对是一种定位，它忽略了其他一切的位置，只是被放置。您应该很少/永远不要将其用于此类容器。
我添加的真正重要的行是margin: 0 auto;，它将其放在父容器的中心(水平(。(里面的容器(我还在将页面容器推入的正文上放置了填充，而不是使用边距。
您还可以查看此代码笔几个小时：https://codepen.io/anon/pen/WOaEeJ
html
{
height:100%;
width:1280px;
margin:0;
padding:0;
}
body
{
background: url('https://static1.squarespace.com/static/56d8bff4a3360ca940504574/t/5847038d3e00be622f3ce337/1481049003115/?format=1500w');
font-family: arial,Myriad pro,sans serif;
color:#1E1B1B;
background-repeat: no-repeat;
background-size: 100%;
padding: 20px;
}
#page
{
width: 100%;
height: 89%;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
padding:0px;
}
为了好练习，给你的 HTMLdiv 一个类
<body>
<div id="page" class="PageClass">
</div>
在您的 CSS 中使用 vh(视图高度(和 vw(视图宽度(属性，如下所示：
.PageClass {
{
**width: 100vw;**
background-color: rgba(255,255,255,0.7);
position: absolute;
/* you wanna take this of since it is not letting you make the page ful width and giving a 60px spaing on the left */ margin-left:60px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
min-height:100vh;
}
}
使用 vh 和 vw 将使div 动态并与所有设备尺寸兼容。 毫不费力。
祝你好运，我的朋友