代码之家 › 专栏 › 技术社区 › Vali RO

即使将宽度和高度设置为100,也会显示滚动条

width height css html

Vali RO · 技术社区 · 8 年前

这是我的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');

}

我能做什么?

2 回复 | 直到 8 年前

Mr Lister hawi 8 年前

首先,设置 html 和 body 到0。默认边距为8px,因此主体的总宽度为100%(窗口)加16px,总计超过100%!

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>

或者,更可能的情况是,我认为你的意思是让其他部门进入#stars部门,对吗?在这种情况下,向下移动其结束标记。

Kiwagi 8 年前

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

Mass · 如何在Tailwind CSS v4中创建配置

9 月前

magenta placenta · 将css变量合并为一个变量

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

10 月前

Luckkks · 过渡色工作不正常

10 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

10 月前