需求来了：
图片.png
easy，中间放个div，然后margin:20px即可，交差：
图片.png
感觉有点敷衍。思考下怎样蓝色边怎样才能都一样宽。js设置div的高度？不好，麻烦死了。
应该有css直接搞定的办法的。我想了下，把HTML、body、div统统高度100%，然后效果：
图片.png
底部咋回事捏？竟然产生滚动条了，要滚动下才能看到底部的蓝色：
图片.png
这肯定不行啊。分析下原因，应该是div设置100%高度后再margin:20px;就将div的整体高度硬生生又撑开了40px，于是只要往下延伸了。那么把高度设置为90%如何？看起来差不多了，但是这个方法不妥，因为和屏幕大小相关，其他屏幕看到的可能不是同等的蓝色宽度。突然想到box-sizing: border-box;这个方法，是不是能将margin缩到自己框里呢？但是看了下说明：
图片.png
它只管border和padding，而对于margin是无效的。
自己一时搞不定，于是请教同学，结果他给出个方案。直接div设置个border宽度20px，我大喊妙啊，我咋没想到，效果确实达到了：
图片.png
代码提炼了下如下：
<!DOCTYPE html>
<html>
<head>
<title>div test</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{height: 100%;}
.test {height: 100%; border: 20px solid #00A0E9; box-sizing: border-box;}
</style>
</head>
<body>
<div class="test">fasdfasdf</div>
</body>
</html>
可是我不甘心，中觉得靠margin应该可以。于是我仔细思考：不就是上下一共多出来40px然后撑到底部么，如果我能把这40px减掉不就好了么？忽然脑海里删过个calc，这是css3.0中的一个函数，可以动态计算长度值。那么用height:calc(100% - 40px);即可，测试了下确实可以：
图片.png
不过看起来是一样了，但是上下滚动了下发现还是和border方案解决有点区别的，这个可以往下滚动一点点，虽然看不见滚动条，不知道是不是因为撑开然后又通过calc缩回去导致的，如果是那也是浏览器渲染的bug。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>div test</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{height: 100%;}
body{background:#00A0E9;}
.test{height:calc(100% - 40px);margin:20px; background:#fff;}
</style>
</head>
<body>
<div class="test">fasdfasdf</div>
</body>
</html>
综上，还是用border的方案好。
————————————————
版权声明：本文为CSDN博主「无·法」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sysdzw/article/details/123469252
网友评论