Question

我有一个简单的CSS加载指示器，用于使用Webkit径向渐变和动画的基本Web应用程序。但是，在加载过程中，水平和垂直滚动条都会出现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="nofollow">
<title>Resident Manager Portal</title>
<link rel="shortcut icon" href="resources/icons/favicon.ico">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
background-image: -webkit-radial-gradient(center, ellipse contain, #00AED9 0%, #0075B0 100%)
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
width: 100%;
height: 30px;
text-align: center
}
#appLoadingIndicator > * {
display: inline-block;
width: 30px;
height: 30px;
background-color: #FFFFFF;
opacity: 0;
-webkit-border-radius: 10px;
margin: 0 5px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
#appLoadingIndicator > :nth-child(1) {
-webkit-animation-delay: 0s;
}
#appLoadingIndicator > :nth-child(2) {
-webkit-animation-delay: 0.5s;
}
#appLoadingIndicator > :nth-child(3) {
-webkit-animation-delay: 1s;
}
@-webkit-keyframes appLoadingIndicator{
20% {
opacity: 0
}
50% {
opacity: 1
}
80% {
opacity: 0
}
}
</style>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

我可以添加overflow-x: hidden;和overflow-y: hidden;来隐藏条形图，但我看不到内容溢出的任何地方。有什么建议吗？

Answer 1

页面的宽度和高度是100％+标准边距，所以它溢出。尝试删除边距：

html, body {
   margin:0;
}

滚动条显示没有内容溢出

1 个答案: