滾動條出現沒有內容溢出

我有一個簡單的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;躲吧，但我沒有看到任何地方的內容滿溢。有什麼建議麼？

來源

2013-03-28 Stephen Cluff

始終使用CSS重置。 –

一個jsFiddle會很好。 – starbeamrainbowlabs

頁面的寬度和高度是100％+標準頁邊距，所以它是滿溢的。嘗試刪除邊距：

html, body { 
    margin:0; 
}

來源

2013-03-28 18:23:09 middleinitial

滾動條出現沒有內容溢出

回答

相關問題