我遵循流畅的布局,其中我有包含标题、菜单和正文的模板。
<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%,这里出了什么问题?
最佳答案
将以下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>
关于javascript - div 未缩放到 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20187014/