Question

我有这个div元素，我用它作为添加到body元素的图像的第二个背景但它从来没有正常工作，因为底部的长度永远不会匹配。这是screenshot。

我确实让它工作了一次但是当我修改任何其他元素时它总是搞砸了。宽度也有同样的问题。我希望你能帮忙，因为我坚持这个。

我的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 % ;
}

我的HTML：

<body>
    <div id="page">
</div>

Answer 1

所以我写了一个应该帮助你的例子。

因此，您将页面div设为绝对位置元素，这使得很难放置在其他对象中。绝对是一种忽略其他所有东西并且只是被放置的定位。您应该很少/从不将它用于这样的容器。

我添加的真正重要的一行是margin: 0 auto;，它将它放在父容器的中心（水平）。（它在里面的容器）我也把填充物放在推动页面容器的主体上，而不是使用边距。

您也可以在几个小时内查看此codepen：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;
    }

Answer 2

为了良好的练习，给你的html div一个类

 <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动态化并与所有设备大小兼容。毫不费力。

祝你好运我的朋友

DIV元素不适合网页长度

2 个答案: