Question

我开始学习网络开发，所以我买了一个关于udemy的课程。现在我正在学习CSS3 / HTML5，并开始了一个CSS3.A网页的小项目，它代表了Universe。我想创建一个动画。我有一个问题：我希望页面是全宽和高（不滚动）。首先我把黑色放在页面上，之后我创建了一个616x616 png图像，带有代表星星的白点。好了，之后我将星星放在页面上，全宽/高度消失，滚动处于活动状态。为什么？这是我的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％（窗口的）加上16px，总计超过100％！

其次，在您当前的示例中，＃stars div为100％高，但之后您还有其他一些内容，总共125px，这意味着总内容高度为100％加上125px。解决这个问题的方法是将#stars的高度降低125px。

＆＃13;

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');

}

＆＃13;

<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>

＆＃13;

或者，更有可能的是，我认为你的意思是其他div在#stars div中，对吧？在这种情况下，请将其结束标记向下移动。

Answer 2

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

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

即使设置100宽度和高度，滚动条也会出现

2 个答案: