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

当我给菜单（孩子）div宽度为20％时，我的html页面正在获得水平滚动条。但是我父母div的宽度为100％而且我的孩子div没有达到100％，我被迫给出18％，这里出了什么问题？

Answer 1

将以下css添加到divs

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

div不缩放到100％宽度

1 个答案: