Question

我有，我希望div具有与浏览器宽度相同的尺寸，高度和宽度减去30px，以给出一个白色边框的想法。每当这些div调整大小时，浏览器都会相应调整。我没有使用边框：15px纯白色，因为它会创建滚动条而我不想要

我尝试了这个，但它也创建了一个滚动条。

<body>
    <div id="background-wrapper">
        <div id="main-wrapper">
           <!-- <img src="bla bla" /> -->
        </div>
    </div>
</body>

#background-wrapper{
    background-color:#FFF;
    position:absolute;
    width:100%;
    height:100%;
    background-color:#FFF;
}

#main-wrapper{
    background-color:#F00;
    position:relative;
    float:left;
    width:100%;
    height:100%;
    top:15px;
    left:13px;
}

任何想法？

Answer 1

为什么不摆脱#background-wrapper元素然后再这样做呢？

#main-wrapper {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
}

可以找到一个示例here。

Answer 2

您可以在内部div上尝试一些填充

<body>
<div id="background-wrapper">
    <div id="main-wrapper">
       <!-- <img src="bla bla" /> -->
    </div>
</div>
</body>

#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}

#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/

}

Answer 3

试试这个：

body {
  background-color: #fff;
}

#main-wrapper {
  margin: 30px;
}

不需要 background-wrapper 。

与浏览器尺寸相同的css div减去30 px的宽度和高度

3 个答案: