设置100宽高也出现滚动条

Question

我开始学习网络开发，所以我在 udemy.For 上买了一门课程，现在我正在学习 CSS3/HTML5 并开始了一个小项目 CSS3.A 代表 Universe.I想制作动画。我有一个问题：我希望页面是全宽和全高（无滚动）。首先我将黑色放在页面上，然后我创建了一个 616x616 png 图像，带有代表 stars.Well 的白点，在我将星星放在页面上之后，完整的 width/height 消失并且滚动是 active.Why ？这是我的 HTML 代码：

<html>
<head>
<title>Earth Planet Orbiting</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
        <!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
<body id="universe">
    <div id="stars"></div>
    <div id="sun"></div>
    <div id="earth0rbit">
        <img src="images/earth.png" alt="Earth" width="130" height="125">
        <div id="moon0rbit">
            <div id="moon"></div>
        </div>
    </div>
</body>
</html>

这是CSS代码

html, body {
height: 100%;
width: 100%;
}
#universe {
background: black;
background: -webkit-radial-gradient(#555, #000);
background: -moz-radial-gradient(#555, #000);
background: -o-radial-gradient(#555, #000);
background: radial-gradient(#555, #000);
}
#stars {
width: 100%;
height: 100%;
background-image: url('images/stars.png');

}

如果我从#stars 中删除具有宽度和高度的行，滚动将被禁用但点（星星不会出现）我能做什么？对不起我的英语！

Answer 1

首先，将html和body的边距设置为0。默认边距为8px，所以正文的总宽度为100%（window的）加上16px，合计超过100%！

其次，在您当前的示例中，#stars div 是 100% 高，但是您在它之后还有一些其他内容，总共 125px，这意味着总内容高度是 100% 加上 125px。解决方案是将#stars 的高度降低 125 像素。

html, body {
height: 100%;
width: 100%;
margin:0; /* new */
}
#universe {
background: black;
background: -webkit-radial-gradient(#555, #000);
background: -moz-radial-gradient(#555, #000);
background: -o-radial-gradient(#555, #000);
background: radial-gradient(#555, #000);
}
#stars {
width: 100%;
height: calc(100% - 125px);
background-image: url('images/stars.png');

}

<html>
<head>
<title>Earth Planet Orbiting</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
        <!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
<body id="universe">
    <div id="stars"></div>
    <div id="sun"></div>
    <div id="earth0rbit">
        <img src="images/earth.png" alt="Earth" width="130" height="125">
        <div id="moon0rbit">
            <div id="moon"></div>
        </div>
    </div>
</body>
</html>

或者，更有可能的是，我认为您的意思是让其他 div 位于 #stars div 内，对吗？在这种情况下，将其结束标记向下移动。

Answer 2

如果您不想滚动，请将此添加到您的 css

html,body{width:100%; height:100%;
overflow:hidden;}

设置100宽高也出现滚动条

The scroll bar appear even if set 100 width and height

html

css

height

width