콘텐츠 오버플로없이 스크롤 막대가 나타납니다.

Webkit 방사형 그래디언트 및 애니메이션을 사용하는 기본 웹 앱에 대한 간단한 CSS로드 표시기가 있습니다. 그러나로드 프로세스 중에 가로 및 세로 스크롤 막대가 나타납니다.콘텐츠 오버플로없이 스크롤 막대가 나타납니다.

<!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;이 줄을 숨기기 위해 추가 할 수 있지만 난 아무 내용이 넘쳐 표시되지 않습니다. 어떤 제안?

출처

2013-03-28 Stephen Cluff

항상 CSS 재설정을 사용하십시오. –

jsFiddle이 좋을 것입니다. – starbeamrainbowlabs

페이지 너비와 높이가 100 % + 표준 여백이므로 오버플로입니다. 다음과 같이 여백을 제거하십시오.

html, body { 
    margin:0; 
}

출처

2013-03-28 18:23:09 middleinitial

콘텐츠 오버플로없이 스크롤 막대가 나타납니다.

답변

관련 문제