Question

我有一个带有固定背景图片的简单网站。我希望它保持在那里，其他一切都应该滚动它。在底部我有一个导航栏。一个带边框和内联块列表的简单div容器。所以我在背景中有我的全尺寸背景图像，它填满了整个屏幕和我的内容。当我开始滚动时，内容开始向上移动并且应该为即将到来的导航栏放置，但在底部会出现一个空格。

未滚动：

滚动时

:(在imgur上打开pic以查看空白区域）

背景保持原样，但当我滚动时，有点＆＃34;拉起来＆＃34;白色空间。但是不应该做对吗？这与保证金有关吗？

HTML：

<body>
<div class="mainDiv">
<div class="opener">
    <img src="header.svg" alt="" width="30%">
</div>
<div class="logo">
    <img src="logo.svg" alt="">
</div>
<nav>
    <ul>
        <li>Start</li>
        <li>Tracks</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>
</div>
</body>

CSS：

html, body {
font-family: 'Raleway', sans-serif;
margin: 0 !important;
padding: 0 !important;
height: 100%;
}

p {
margin: 0;
}

.mainDiv {
background-image: url(main_background.png);
background-color:#707070;
background-attachment: fixed;
background-position:center;
height: 100%;
}

.opener {
margin: 0 auto;
padding-top: 4%;
color: white;
text-align: center;
}

.logo {
margin: 0 auto;
padding-top: 50px;
width: 30%;
}

nav {
margin: 0 auto;
margin-top: 40px;
width: 30%;
border-style: solid;
border-color: white;
border-radius: 5px;
}

ul {
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}

li {
display: inline-block;
color: white;
padding: 10px;
margin-right: 5%;
margin-left: 5%;
}

li:hover {
cursor:pointer;
}

感谢阅读和帮助：）

Answer 1

您的.backDiv类中的背景已修复，但mainDiv元素本身并未修复，因此它正在滚动。

您可以将背景放在html，body类中或者您可以将position: fixed添加到mainDiv类。

html元素创建无法解释的白色间距

1 个答案: