为什么 100% 宽度穿过父 div？ [复制]

Question

更新：this answer 不工作。看看this pen

我将 div 的宽度设置为 700px 但如果我添加一个子 div 100% 宽度，则子 div 跨越父 div 的边界，子 div 的实际大小为 730px 。为什么？codepen

<div class="container">
  <h1>Drive Nuts</h1>
 <div class="info">
  <div class="left">Call No.</div>
  <div class="right">Datas</div>
 </div>
</div>

CSS：

    body {
       background: #34495e; 
       padding: 50px 0px;
    }

   .container {
       background: #ecf0f1; 
       min-height:480px; 
       width:700px; margin: 0px auto;
    }
    .container h1 {
       text-align: center;
       background: #27ae60; 
       color: #ecf0f1; 
       line-height: 90px; margin: 0px;
     }

     .left  {
       background: #16a085;
       padding:15px; 
       font-weight: bold; 
       font-size: 20px; 
       color: #fff; 
       width:150px; float:left;
     }

     .right  { 
       padding:15px;
       font-weight: bold; 
       font-size: 20px; 
       color: #fff; 
       width:; 
       float:left; 
       background: #2c3e50;
       width:100%;
    }

Answer 1

您必须从width 中删除padding(30px)。你可以使用calc() 来做。

.right {
    padding: 15px;
    font-weight: bold;
    font-size: 20px;
    color: #FFF;
    float: left;
    background: none repeat scroll 0% 0% #2C3E50;
    width: calc(100% - 30px);
}