将嵌套的div宽度拉伸到容器的宽度？

Question

您好StackOverflow，

如何让我的代码与我想要的输出相似。我基本上想要一个类似于带有嵌套div的卡片的div，它占据了卡片div的整个宽度（没有填充） 到目前为止没有任何运气，使用以下代码：

CSS：

.card {overflow:hidden;padding:5px;}
.innerStripe {position:absolute; left:0; right:0; background-color:red; color:white;} overflow:hidden;}

HTML：

<div class="card" style="col-md-12">
   <h1>Title Text</h1>
   <div class="innerStripe">Bar Text</div>
   <p>Paragraph text...</p>
</div>

请参阅JSFIDDLE：http://jsfiddle.net/CkVLn/（无法在条纹后显示段落）

Answer 1

JSFIDDLE

忘记位置，简单的方法是使用margin。在这种情况下，总是给予负利润。从border-width

两侧获得负边距

Css将是：

.card { padding:0px;  border:5px solid #CCC; }
.card * { padding:0px 30px; }
.innerStripe { margin:0px -5px; background-color:red; color:white; padding:0px 35px; }

Answer 2

从您的div中删除absolute position。

<强> CSS

 .card {overflow:hidden; width:100px;border:1px solid black;position:relative;}
 .innerStripe {background-color:red; color:white; overflow:hidden;}

DEMO

Answer 3

使用简单的解决方案更新了您的小提琴： http://jsfiddle.net/9DcBX/

从外部div中删除填充。

此外，从innerstripe中删除位置：绝对和左右属性

.innerstripe{
width:100%;
background-color:red; 
color:white;
}