为什么将<html>和<body>设置为100%时JSFiddle会显示滚动条

将<html>和<body>设置为100%时，JSFiddle会显示滚动条的原因是因为默认情况下，浏览器会为<html>和<body>元素设置一些默认的边距和内边距。这些默认的边距和内边距会导致<html>和<body>元素的实际高度超过视口的高度，从而出现滚动条。

为了解决这个问题，可以通过CSS样式重置来消除默认的边距和内边距。可以使用以下CSS代码：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

这样设置后，<html>和<body>元素的边距和内边距被重置为0，并且将高度设置为100%，同时通过overflow: hidden;隐藏了滚动条。

在JSFiddle中，可能还需要进一步设置<body>元素的box-sizing属性为border-box，以确保元素的宽度和高度包括边框和内边距。可以使用以下CSS代码：

body {
  box-sizing: border-box;
}

这样设置后，<body>元素的宽度和高度将包括边框和内边距，避免了因为边框和内边距导致的滚动条出现。

总结起来，将<html>和<body>设置为100%时，JSFiddle会显示滚动条是因为默认的边距和内边距导致元素的实际高度超过视口的高度。可以通过CSS样式重置来消除默认的边距和内边距，并且设置box-sizing属性为border-box来避免滚动条的出现。

腾讯云相关产品和产品介绍链接地址：

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云