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

标签 css

我有并且我希望 div 的尺寸与浏览器的宽度相同,高度和宽度减去 30px,以提供具有白色边框的想法。每当这些 div 调整大小时,浏览器都会相应地调整。 我没有使用 border: 15px solid white 因为它会创建滚动条而且我不想要

我试过了,但它也创建了一个滚动条。

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

有什么想法吗??

最佳答案

为什么不去掉 #background-wrapper 元素,然后改用这个呢?

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

可以找到一个例子here .

关于与浏览器尺寸相同的 css div 少 30 px 宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6872174/

相关文章:

css - 如何覆盖这个materialui样式

Javascript 移动设备宽度检查和类删除

javascript - 无法使用对齐参数将表格放置在中心

css - 在两个 div 之间留边距?

html - 对于任何输入类型, Angular Material 输入标签始终 float

jquery - 侧边栏 Accordion 状态和图标状态

html - 在 Internet Explorer 11 中使用 'display:block'

html - 让JPG图片贴在网页底部不拉伸(stretch)

html - 使 div 响应

javascript - HTML、CSS、JavaScript 模态和许多页面