HTML/CSS页面出现多余滚动条无法固定，如何定位CSS问题并修复？

• 浏览器默认样式自带body边距未重置：主流浏览器默认给body设置了8px的外边距，会额外撑开页面尺寸
• 子元素溢出未裁剪：你为.part类设置了上下左右的偏移，所有超出父容器.trans_box的元素部分都会被计入页面整体可滚动范围，触发滚动条
• 未限制页面整体溢出：你没有给根元素设置溢出隐藏规则，超出视口的内容会默认触发滚动条

按如下规则修改CSS即可解决问题：

1. 首先重置html和body的默认边距，同时添加overflow:hidden规则禁止页面滚动
2. 给父容器.trans_box添加overflow: hidden，裁剪子元素溢出的部分，避免溢出内容撑开页面滚动范围
3. 可选优化：如果需要保持旋转动画在任意尺寸屏幕下都居中，可以把.trans_box的top:200px硬编码偏移改成transform相对视口居中，避免小屏幕下溢出

修改后的完整CSS代码参考：

html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
    background-color:  black;
    margin: 0;
    padding: 0;
}
.trans_box {
    width: 180px;
    height: 180px;
    background-color: green;
    overflow: hidden;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: 200px;
    animation: block-rotate 6s linear infinite;
}

@keyframes block-rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}
.part {
    position: absolute;
    width:180px;
    height:180px;

    -webkit-border-radius:200px 0 0 0; 
    -moz-border-radius:200px 0 0 0;
}

#one {
    background-color:blue; 
    top: -70%;
    transform: rotate(45deg);
    
}
#two {
    background-color: pink; 
    transform: rotate(135deg);
    left: 70%;
}
#three {
    background-color: red;
    transform: rotate(-45deg);
    left: -70%;
}
#four {
    background-color: antiquewhite;
    transform: rotate(-135deg);
    top: 70%;
}

内容的提问来源于stack exchange，提问作者kimking