Question

无论我尝试什么，我都无法使这个HTML页面滚动。

有人可以帮忙吗？

我已尝试删除所有overflow:hidden。我尝试将overflow:scroll和auto添加到class。

这是我的代码：

.banner {
  text-align: center;
  position: relative;
  background-color: cyan;
  width: 100%;
  height: 140px;
  z-index: -1;
  line-height: 10px;
  margin: 0px, 0px;
  overflow-y: auto;
}

.banner h1 {
  font-size: 60px;
  color: blue;
}

.infobar {
  border: 2px solid red;
  top: 200px;
  left: 0.5%;
  height: 250px;
  width: 99%;
  position: relative;
}

.banner h2 {}

.banner h3 {}

.intro h1 {}

.intro p {}

.meme {
  color: black;
  width: 100%;
}

.meme table {
  width: 98%;
}


/* If you want the top function to work the position must be set to fixed of a div*/

.meme#table1 {
  top: 240px;
  position: static;
  overflow: scroll;
}

.meme h1 {
  font-size: 20px;
  width: 100%;
  height: 20px;
  background-color: red;
  border: red solid;
  border-width: 0px 5px 0px 5px;
}

.meme img {
  border-style: solid;
  border-width: 5px;
  border-color: red;
  width: 100%;
  height: auto;
}

.meme tr {
  border-spacing: 0px;
}

body {
  background: url("http://wolvoman80.co.uk/wp-content/uploads/2016/11/Theresa-May.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.navigationbar {
  text-align: center;
  position: fixed;
  background-color: rgba(255, 6, 6, 0.5);
  width: 100%;
  height: 80px;
  z-index: -1;
  top: 145px;
  margin: 0px, 0px;
}

.navigationbar a {
  font-size: 60px;
  padding-right: 0.5em;
  color: blue;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title>Politics Mocking Central</title>
  <link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="banner">
    <!-- This is the top title on the screen-->
    <h1>Mocking Politics</h1>
    <h2>Is The Only Way</h2>
    <h3>As Politics Is A Joke Now</h3>
  </div>
  <div class="navigationbar">
    <a href="homepage.html">Home</a>
    <a href="gamepage.html">Game</a>
    <a href="memepage.html">Memes</a>
    <a href="videopage.html">Videos</a>
    <a href="homepage.html">Joke Profiles</a>
  </div>
  <div class="meme" id="table1">
    <table>
      <tr>
        <td width="47%">
          <h1>May In a Nutshell</h1>
        </td>
        <td width="2%">&nbsp;</td>
        <td width="47%">
          <h1>It's Clearly D, Right?</h1>
        </td>
      </tr>
      <tr>
        <td width="47%"><img src="meme1.jpg" alt="May In a Nutshell"></td>
        <td width="2%">&nbsp;</td>
        <td width="47%"><img src="meme2.jpg" alt="May In a Nutshell"></td>
      </tr>
      <tr>
        <td width="47%">
          <h1>Let's Take Back Control in an Authotarian Way!</h1>
        </td>
        <td width="2%">&nbsp;</td>
        <td width="47%">
          <h1>It's Clearly D, Right?</h1>
        </td>
      </tr>
      <tr>
        <td width="47%"><img src="meme3.jpg" alt="May In a Nutshell"></td>
        <td width="2%">&nbsp;</td>
        <td width="47%"><img src="meme2.jpg" alt="May In a Nutshell"></td>
      </tr>
    </table>
  </div>
</body>

</html>

Answer 1

完全不知道要滚动哪个DIV，但是，如果它是类.banner的div，那么只需将z-index更改为0 < / p>

.banner {
    text-align: center;
    position: relative;
    background-color: cyan;
    width: 100%;
    height: 140px;
    z-index: 0; // Negative indexes put the element behind other elements and wont let you control it by mouse events
    line-height: 10px;
    margin: 0px  0px;
    overflow-y: scroll; 
}

Answer 2

CSS：

{{1}}

因为和其他人一样，我不知道你想要滚动什么。

HTML：无法滚动网站

2 个答案: