Question

因此，我的页面不会向下滚动。我在页面底部有文本，但仍然无法滚动到页面的其余部分。我弄乱了职位，但没有任何帮助。我不确定是什么原因导致它锁定，尽管它可能与背景有关。我已经尝试过溢出，但发生的所有事情都是背景滚动打开。

html {
  height: 100%;
  width: 960px;
  overflow: scroll;
}

.active {
  background-color: #4caf50;
  height: 50px;
}

ul {
  list-style-type: disc;
  margin: 0px;
  padding 3;
  overflow: hidden;
  float: right;
  font: 15px "Courier", san-serif;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  height: 20px;
  width: 60px;
  float: left;
}

li a:hover {
  background-color: lightcyan;
}

h1 {
  color: lightskyblue;
  text-decoration-color: red;
  background-color: ghostwhite;
  width: 110%;
  height: 40px;
  border-style: solid;
  border-width: 4px;
  text-align: center;
  padding: 1px;
  margin-left: 5%;
}

body {
  background: url("blue-ice-texture-wallpaper-4.jpg");
  background-repeat: no-repeat;
}

#nav {
  float: left;
  width: 100px;
  color: orange;
  margin: 90px 0px 50px;
}

#top {
  float: left;
  width: 100%;
  height: 90px;
  color: white;
  background-color: black;
  position: fixed;
  left: 110px;
  top: 0px;
}

#side {
  float: left;
  width: 110px;
  height: 6000px;
  background-color: white;
  position: fixed;
  left: 0px;
  top: 90px;
}

#main {
  width: 75%;
  height: 100%;
  color: black;
  position: fixed;
  top: 80px;
  left: 114px;
}

.tran {
  background: url("transparent%20for%20text.png");
  border-style: solid;
  border-color: dodgerblue;
  border-width: 7px;
  color: floralwhite;
  font-size: 18px;
  margin-left: 40px;
  position: fixed;
  left: 225px;
  width: 1000px;
  text-align: center;
}

#list {
  position: fixed;
  left: 25px;
  top: 80px;
  float: left;
  text-align: left;
}

.logo {
  position: fixed;
  left: 0;
  top: 0;
  background-color: gray;
  width: 110px;
  height: 90px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Welcome</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div id="nav">
    <div>
      <img src="frost.jpg" alt="Frostfall logo" class="logo">
    </div>
    <div id="side">
      <ul>
        <li><a href="main.html">Home</a></li>
        <li><a href="art.html">Art</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="screens.html">Screen-Shots</a></li>
        <li><a href="Videos.html">Videos</a></li>
        <li><a href="music.html">Music</a></li>
      </ul>
      <div id="top">
        <img width="100%" height="100%" src="poor.png">
      </div>
    </div>
  </div>
  <div id="main">
    <h1>Frostfall Studios: "The most geniune developers out there"</h1>
    <p class="tran">
      <font face="verdana">Lorem
      </font>
    </p>
  </div>
</body>

</html>

Answer 1

使用overflow-x:scroll和overflow-y:scroll 如果这不起作用，请尝试发送垃圾邮件：

a <br>
a <br>
a <br>
...

Answer 2

有时候，您需要向要设置宽度和高度的项目中添加一些display: block。

尝试将display: block;添加到html，body（以及其他地方）CSS选择器中。

您会认为这些应该是默认设置，但是多年来，我发现不同的浏览器实现了不同的display属性，有时设置它们只是可以清除一切。

此外，我发现Firefox在固定滚动上存在一些缺陷。不确定这些问题是否已解决，但是我建议您在Chrome / Firefox的Developer Inspector工具中试用一下，添加这些display: blocks;，直到获得所需的内容。

希望有帮助。使卷轴正常工作可能会让人头疼，我发现它只是一种反复试验的方法，但是您的方法看起来不错，我会尝试一下。在那儿等着。

P.S。另外，我发现在纸上绘制布局有助于您把握小细节，这可能使您无法正常工作。

即使没有固定的位置，我的页面也不会滚动

2 个答案: