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

當我將menu（child）divs寬度設為20％時，我的html頁面正在獲得水平滾動條。 但是我的父div的寬度為100％，我的孩子div的比例未達到100％，我被迫提供18％，這怎么了？

Answer 1

將以下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>