gpt4 book ai didi

html - 设置100宽高也出现滚动条

转载 作者:行者123 更新时间:2023-11-28 03:02:04 25 4
gpt4 key购买 nike

我开始学习网络开发,所以我在 udemy 上买了一门类(class)。现在我正在学习 CSS3/HTML5 并开始了一个 CSS3 的小元素。一个代表宇宙的网页。我想创建一个动画。我有一个问题:我希望页面是全宽和全高(无滚动)。首先我将黑色放在页面上,然后我创建了一个 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 中删除具有宽度和高度的行,则滚动被禁用但点(没有出现星星)我能做些什么 ?对不起我的英语!

最佳答案

首先,将 htmlbody 的边距设置为 0。默认边距为 8px,因此 body 的总宽度为(窗口的)100%加上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 中,对吗?在这种情况下,将其结束标记向下移动。

关于html - 设置100宽高也出现滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46143943/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com