html - 在 100% 宽度的 div 上创建内部面板需要什么 CSS

Question

我正在尝试创建一个半透明背景，以通过使用半透明 div 来减少文本与纹理背景的交互。当父 div 的尺寸由像素值高度和 100% 宽度定义时，我似乎无法弄清楚如何编写 CSS 来实现这种效果。

显然，当高度和宽度定义为 100% 时，我不能使用边距来“缩小”div。这只是网页的一小部分，因此我想避免更改整个布局来实现这一效果。

HTML:

<div id="container">
    <div id="innerPanel"></div>
</div>

CSS:

html {
    height:100%;
    background-color:black;
}
#container {
    width:100%;
    height:250px;
    background-color:#0183e5;
}
#innerPanel {
    width:100%;
    height:100%;
    margin:15px;
    background-color:rgba(255, 255, 255, .5);
    border-radius:10px;
}

http://jsfiddle.net/rhewitt/qpYFV/1/

Answer 1

您需要做的就是将 padding 添加到您的父容器中。

这是更改后的 CSS:

#container {
    width:100%;
    height:250px;
    background-color:#0183e5;
    padding: 10px;
}

Demo

我建议使用 box-sizing: border-box; 或 calc(100% - 20px) 不用担心要设置什么尺寸。

Demo - box-sizing: border-box;

Demo - 计算(100% - 20px)

---

• Box-sizing browser support

• Calc browser support