gpt4 book ai didi

javascript - 分区宽度 :100% will over the browser window border

转载 作者:太空狗 更新时间:2023-10-29 12:23:08 25 4
gpt4 key购买 nike

这是我的代码:

<body style="width:100%; height:100%; margin:0px">
<div id="horizontal-bar" style="width:100%; height:34px; border: 10px solid;"></div>

这是我的截图: enter image description here

#horizo​​ntal-bar 右边框不显示,如何让#horizo​​ntal-bar 完全显示在浏览器窗口中,如果css 做不到?我可以用 js 做吗?

最佳答案

这里,你需要使用box-sizing: border-box,因为border也是盒子模型的一部分:


(来源:codemancers.com)

片段

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>

关于javascript - 分区宽度 :100% will over the browser window border,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41487020/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com