div宽度:100%将超过浏览器窗口边框
chi*_*nce 4 html javascript css google-chrome
这是我的代码:
<body style="width:100%; height:100%; margin:0px">
<div id="horizontal-bar" style="width:100%; height:34px; border: 10px solid;"></div>
这是我的截图:
#horizontal-bar右边框没有显示,如何让#horizontal-bar在浏览器窗口中完全显示,如果css不能这样做？我能用js做吗？
在这里,你需要使用box-sizing: border-box因为,border也是盒子模型的一部分:
片段
body {
width: 100%;
height: 100%;
margin: 0px;
}
#horizontal-bar {
width: 100%;
height: 34px;
border: 10px solid;
/* Add This */
box-sizing: border-box;
}<div id="horizontal-bar"></div>您用于比较的旧的非工作代码是:
body {
width: 100%;
height: 100%;
margin: 0px;
}
#horizontal-bar {
width: 100%;
height: 34px;
border: 10px solid;
}<div id="horizontal-bar"></div>