div가 100 % 너비로 조정되지 않습니다.

Question

헤더, 메뉴 및 본문이있는 템플릿이있는 유체 레이아웃을 따르고 있습니다.

<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; 
} 

어디가 20 %로 폭 메뉴 (자식) 된 div를 줄 때, 내 HTML 페이지가 가로 스크롤 막대를 받고있다. 내 부모 div는 100 %로 너비가 있고 내 자식 div는 최대 100 %까지 크기가 조정되지 않습니다. 18 %를주지 않으면 안됩니다. 여기서 잘못된 점이 있습니까?

Answer 1

추가 다음 CSS는

.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>