div不縮放到100％寬度

我遵循流體佈局，其中包含標題，菜單和正文的模板。div不縮放到100％寬度

<div class="w100 h100"> 
    <div id="headerBox" style="height: 10%;" class="w100"> 
     <div style="width: 80%;" class="lfloat"> 
      <tiles:insertAttribute name="header" /> 
     </div> 
     <div style="width: 18%; height: 80%;" class="lfloat"> 
      <tiles:insertAttribute name="menu" /> 
     </div> 
    </div> 
    ---------------body container here -------------- 
</div>

CSS

.h100{ 
    height:100%; 
} 
.w100{ 
    width: 100%; 
} 
html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    font-family: "Times New Roman", Times, serif; 
    width: 100%; 
    height: 100%; 
    margin: 0%; 
    padding: 0%; 
    overflow: auto; 
}

在那裏，當我給菜單（子）div的寬度爲20％，我的html頁面越來越水平滾動條。但我的父div有100％的寬度和我的孩子div不擴展到100％，我被迫給18％，這裏怎麼了？

來源

2013-11-25 pappu_kutty

添加'HTML，身體{高度：100％;寬度：100％}' – Vucko

我已經添加那些我的身體和HTML –

嘗試給予'顯示：塊;'爲'＃headerBox' –

添加以下CSS到的div

.block { 

    display: inline-block; 
    vertical-align: top; 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

---------------html -------------- 
    <div class="w100 h100 block"> 

     <div id="headerBox" style="height: 10%;" class="w100 block"> 

      <div style="width: 80%;" class="lfloat block"> 
       <tiles:insertAttribute name="header" /> 
      </div> 

      <div style="width: 18%; height: 80%;" class="lfloat block"> 
       <tiles:insertAttribute name="menu" /> 
      </div> 
     </div> 
     ---------------body container here -------------- 
    </div>

來源

2013-11-25 08:18:55

div不縮放到100％寬度

回答

相關問題