javascript - 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) div 宽度设置为 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>