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

Question

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

显然,当高度和宽度定义为100%时,我不能使用margin来"缩小"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;
}

演示

我建议使用box-sizing: border-box;或calc(100% - 20px)不担心要确定要设置的尺寸.

演示 -box-sizing: border-box;

演示 -calc(100% - 20px)

• Box-sizing浏览器支持

• Calc浏览器支持