html - padding destroying div 变成一个div

Question

您好，我正在尝试将一个 div 放入一个 div 但第二个将在左侧和右侧填充。

结果我得到的是一个蓝色的 div，它从黑色边框的 div“页面”中推出

fiddle 在右边显示一点。一个网页显示它多达 50px 所以它应该是 y padding left, right which is 25 each,但我不知道错误来自哪里 代码 http://jsfiddle.net/124a0yd9/

感谢大家

CSS:

.page{
border:solid 4px black;
width:100%;
}

.slogan_c {
    color: #0099cc;
    background-color: red;
    font-weight: bold;
        font-size:8px;
margin-top:40px;
margin-bottom:10px;
    width: 100%
padding-left:5px;
padding-right:5px;
border:solid 1px red;

}



.slogan_f{
border:solid 1px pink;
        color: #ffffff;
    background-color: blue;
font-weight: bold;
        font-size:30px;
margin-top:40px;
margin-bottom:10px;
    width: 100%;
padding-left:35px;
padding-right:35px;

}

HTML:

<div class='page'>

<DIV class='slogan_f'>
Texte 1, Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,
</DIV>
<BR><BR><BR>
<DIV class='slogan_c'>
TExte 2, TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,
</DIV>

</DIV>

Answer 1

您必须用填充(左 + 右)减去总宽度 - 边框大小才能达到 100% 宽度。

.slogan_f{ 
  width: calc(100% - 72px);
}

总 div 宽度 (100%) - padding-left (35px) - padding-right (35px) - border-left (1px) - border-right (1px)

工作 fiddle http://jsfiddle.net/124a0yd9/2/