div宽度：100％将超过浏览器窗口边框

Question

这是我的代码：

<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做吗？

Answer 1

在这里，您需要使用box-sizing: border-box因为border也是box模型的一部分：

http://crypt.codemancers.com/assets/images/boxmodel/compare_models-ec8c849825b4fb3e1e6177e49e15d800cb77bdeaa99e6adcf896a65af62ab99f.png

片段

 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>

Answer 2

使用此代码：

<script type="text/javascript"> var w = $(window).width(); $('.horizontal-bar').css('width', w); </script> <body style="width:100%; height:100%;margin:0px"> <div id="horizontal-bar" style="height:34px; border: 10px solid;"></div>

div宽度：100％将超过浏览器窗口边框

问题描述

2 个解决方案

解决方案1
8 2017-01-05 14:03:25

解决方案2
-2 2017-01-05 14:18:30

div宽度：100％将超过浏览器窗口边框

问题描述

2 个解决方案

解决方案1 8 2017-01-05 14:03:25

解决方案2 -2 2017-01-05 14:18:30

解决方案1
8 2017-01-05 14:03:25

解决方案2
-2 2017-01-05 14:18:30