无法显示溢出

Question

我尝试创建的网站有问题。问题是，无论我做什么，我都无法让任何滚动条开始工作。该网站可通过 https://scania01.de/frp/html_twitter/ 访问。有谁能弄清楚这里的问题是什么？

我已经尝试添加 overflow: auto;, overflow: visible;和溢出：滚动；正文和 div.

希望有人能帮助我！

您好，亚历克斯

Answer 1

更改或删除“位置：固定；” 属性的 .divhome_divtweets class 你的内联样式。那应该会带回滚动条。

看完你的代码后，我对你有一些反馈 CSS:

不要将 class 添加到您的 html 标签中，因为这是不允许的
此外，您不能将 id 或 classes 添加到 had 头部或嵌套在其中的任何标签。
避免使用 html 标签的样式，例如； div, body, p, span 等
您已覆盖 and/or 在多个位置为元素（例如正文）添加的样式。这使得难以阅读和调试您的代码。例如，如果您要向正文或 div 元素添加样式，请在单个 CSS 文件中执行此操作，并在其他任何地方覆盖它。
删除冗余和未使用的 CSS
将内联 CSS 移动到 CSS 文件中
我还建议将脚本移动到它们自己的文件中
使用 flexbox and/or CSS 网格来定位你的元素

下面的代码片段是我的意思的一个例子。我删除了您在 head 标签中的所有样式，并将它们移到了您的 site_global.css 中。我还删除了页面顶部文本字段中的内联样式。我使用 #input_tweet id 在 CSS 文件中添加了 width=100%。我还稍微修改了您的 CSS，并删除了很多内容。我只保留了足以维持您现有页面的样式。

body {
  font-family: 'Roboto', sans-serif;
}

.downloadbutton {
  cursor: pointer;
  font-size: 0.7em;
  border-radius: 15px 15px 15px 15px;
  border: 3px solid;
  border-color: rgb(159, 38, 47);
  padding: 7px;
  background-color: #111;
  color: lightgrey;
}

.downloadbuttonclosed {
  cursor: no-drop;
  font-size: 0.7em;
  border-radius: 15px 15px 15px 15px;
  border: 3px solid;
  border-color: rgb(102, 24, 30);
  padding: 7px;
  background-color: black;
  color: grey;
}

.leftmenu {
  height: 100%;
  width: 235px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  padding-top: 20px;
  color: lightslategray;
  border-right: 3px solid rgb(159, 38, 47);
}

.topline {
  height: 35px;
  width: 1430px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 235px;
  background-color: #111;
  color: lightslategray;
  border-bottom: 3px solid rgb(159, 38, 47);
}

.divhome_divtweets {
  margin-left: 250px;
  margin-top: 30px;
  width: 82%;
  padding: 20px;
  color: lightgrey;
  background-color: #111;
  border-radius: 15px;
  border: 3px solid;
  border-color: rgb(159, 38, 47);
}

.tweets {
  font-size: 20px;
  padding: 10px;
  margin-bottom: 40px;
  border-radius: 10px;
  border: 1px solid;
  border-color: rgb(159, 38, 47);
}

.headlinetweetinput {
  margin-top: 50px;
  position: relative;
  top: 0;
  left: 250px;
  width: 82%;
  color: lightgrey;
  background-color: #111;
  border-radius: 15px;
  border: 3px solid;
  border-color: rgb(159, 38, 47);
  padding: 20px;
  font-size: 35px;
}

#input_tweet {
  width: 100%;
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-regular-400.eot);
  src: url(https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-regular-400.eot?#iefix) format("embedded-opentype"), url(https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-regular-400.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-regular-400.woff) format("woff"), url(https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-regular-400.ttf) format("truetype"), url(https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-regular-400.svg#fontawesome) format("svg")
}

.fa,
.far,
.fas {
  font-family: "Font Awesome 5 Free"
}

.fa-comment:before {
  content: "\f075"
}

.fa-comment-alt:before {
  content: "\f27a"
}

.fa-comment-dollar:before {
  content: "\f651"
}

.fa-comment-dots:before {
  content: "\f4ad"
}

.fa-comment-medical:before {
  content: "\f7f5"
}

.fa-comment-slash:before {
  content: "\f4b3"
}

.fa-comments:before {
  content: "\f086"
}

.fa-comments-dollar:before {
  content: "\f653"
}

.fa-heart:before {
  content: "\f004"
}

.fa-heart-broken:before {
  content: "\f7a9"
}

.fa-heartbeat:before {
  content: "\f21e"
}

<html lang="de-DE">

<head>

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta name="generator" content="2018.0.0.379">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&amp;display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/308ca0f35e.js" crossorigin="anonymous"></script>



  <title>Homepage</title>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/site_global.css?crc=444006867">

</head>

<body>

  <div class="leftmenu" unselectable="on" onselectstart="return false;" onmousedown="return false;">
    <p style="font-size: 50px; color: white; padding-top: 20px; padding-left: 30px; font-family: 'Roboto', sans-serif;">Firebird</p>
    <div style="padding-top: 40px; display:none">
      <a style="background-color: black;" class="leftitem" id="lefthome" onmouseover="mouseOverLeft0()" onmouseout="mouseOutLeft0()" onclick="changesite(1)"><i class="fas fa-door-closed" style="padding-right: 7px;" aria-hidden="true"></i> Home</a> <br><br>
      <a class="leftitem" id="left1" onmouseover="mouseOverLeft1()" onmouseout="mouseOutLeft1()" onclick="changesite(2)"><i class="fas fa-shopping-bag" style="padding-right: 12px;" aria-hidden="true"></i> Meine Apps</a> <br><br>
    </div>
  </div>

  <div class="topline" unselectable="on" onselectstart="return false;" onmousedown="return false;">
    <div style="padding-right: 35px; padding-top: 9px;" align="right">
      <!--<p style="padding-left: 20px; float:left;"><i style="padding-right: 5px;" class="fas fa-user-alt"></i> Assistant Chief | Micheal Charter</p>-->
      <a id="close" onmouseover="mouseOverClose1()" onmouseout="mouseOutClose1()" onclick="close()"><i class="fas fa-times" aria-hidden="true"></i></a>
    </div>
  </div>

  <div id="divlogin" style="line-height: 1; display: none;">
    <div class="headline">
      <h1><i class="fas fa-star-of-life" aria-hidden="true"></i> Login</h1>
      <br>
      <label for="input_username" style="font-size:20px;">Benutzername:</label>
      <input style="font-size:20px; margin-left:10px;" type="text" oninput="checkbutton()" id="input_username" name="input_username"><br>
      <label for="input_pwd" style="font-size:20px;">Passwort:</label>
      <input style="font-size:20px; margin-left:57px;" type="text" id="input_pwd" oninput="checkbutton()" name="input_pwd"><br><br>
      <button id="login_button" onclick="login()" class="downloadbuttonclosed" style="float: right;">Bestätigen</button>
    </div>
  </div>

  <div id="divhome" style="line-height: 1; display: block;">
    <div class="headlinetweetinput">
      <h1 id="input_tweet_header" style="font-size:20px;margin-bottom:20px;">Schreibe einen Tweet!</h1>
      <textarea oninput="checktweetbutton()" id="input_tweet" name="input_tweet" rows="4" cols="50"></textarea><br>
      <button style="margin-top:15px;" id="twtbutton" class="downloadbuttonclosed">Tweeten</button>
    </div>
    <div id="home_tweets" class="divhome_divtweets">
      <div id="7370207417623680" class="tweets">
        <img style="display:inline-block;vertical-align:middle;" src="https://image.scania01.de/2020-03-03_19-33-24.png" width="40" height="40">
        <h1 style="display:inline-block;">Scania01</h1><br><br>
        <p style="font-size:17px;">Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das
          ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. </p>
        <p style="font-size:13px;color:rgb(121, 121, 121);text-align: right;">Vor 17 Minuten</p>
        <p style="font-size:13px;color:rgb(196, 50, 60);text-align: left;"><i style="cursor:pointer !important;padding-right:10px;text-decoration: none;" onclick="likepost('7370207417623680')" class="far fa-heart" aria-hidden="true"> 16</i><i style="cursor:pointer !important;padding-right:10px;" class="far fa-comment"
            aria-hidden="true"></i></p>
      </div>
      <div id="7370207417623686" class="tweets">
        <img style="display:inline-block;vertical-align:middle;" src="https://image.scania01.de/2020-03-03_19-33-24.png" width="40" height="40">
        <h1 style="display:inline-block;">Scania01</h1><br><br>
        <p style="font-size:17px;">Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das
          ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. </p>
        <p style="font-size:13px;color:rgb(121, 121, 121);text-align: right;">Vor 17 Minuten</p>
        <p style="font-size:13px;color:rgb(196, 50, 60);text-align: left;"><i id="7370207417623686_like" style="cursor:pointer !important;padding-right:10px;text-decoration: none;" onclick="likepost('7370207417623686_like')" class="far fa-heart" aria-hidden="true"> 16</i><i style="cursor:pointer !important;padding-right:10px;"
            class="far fa-comment" aria-hidden="true"></i></p>
      </div>
      <div id="7370207417623686" class="tweets">
        <img style="display:inline-block;vertical-align:middle;" src="https://image.scania01.de/2020-03-03_19-33-24.png" width="40" height="40">
        <h1 style="display:inline-block;">Scania01</h1><br><br>
        <p style="font-size:17px;">Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das
          ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. </p>
        <p style="font-size:13px;color:rgb(121, 121, 121);text-align: right;">Vor 17 Minuten</p>
        <p style="font-size:13px;color:rgb(196, 50, 60);text-align: left;"><i id="7370207417623686_like" style="cursor:pointer !important;padding-right:10px;text-decoration: none;" onclick="likepost('7370207417623686_like')" class="far fa-heart" aria-hidden="true"> 16</i><i style="cursor:pointer !important;padding-right:10px;"
            class="far fa-comment" aria-hidden="true"></i></p>
      </div>
      <div id="7370207417623686" class="tweets">
        <img style="display:inline-block;vertical-align:middle;" src="https://image.scania01.de/2020-03-03_19-33-24.png" width="40" height="40">
        <h1 style="display:inline-block;">Scania01</h1><br><br>
        <p style="font-size:17px;">Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das
          ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet,
          dass das hier mein Tweet ist. Das ist mein Tweet. Ich habe getweetet, dass das hier mein Tweet ist. </p>
        <p style="font-size:13px;color:rgb(121, 121, 121);text-align: right;">Vor 17 Minuten</p>
        <p style="font-size:13px;color:rgb(196, 50, 60);text-align: left;"><i id="7370207417623686_like" style="cursor:pointer !important;padding-right:10px;text-decoration: none;" onclick="likepost('7370207417623686_like')" class="far fa-heart" aria-hidden="true"> 16</i><i style="cursor:pointer !important;padding-right:10px;"
            class="far fa-comment" aria-hidden="true"></i></p>
      </div>
    </div>
  </div>

  <!-- Other scripts -->

  <!-- RequireJS script -->


  <script>
    var randomtweetinputtextes = ["Was passiert gerade?", "Was geht ab?", "Was möchtest du uns mitteilen?", "Was möchtest du der Welt mitteilen?", "Tweete etwas!", "Schreibe einen Tweet!"]
    var randomtweetinputtexteszahl = Math.floor(Math.random() * randomtweetinputtextes.length)
    document.getElementById("input_tweet_header").innerHTML = randomtweetinputtextes[randomtweetinputtexteszahl]
    document.getElementById("divlogin").style.display = "none"
    document.getElementById("divhome").style.display = "block"

    //addtweet("s")

    function tosite(site) {
      if (site == "home") {
        document.getElementById("input_tweet_header").innerHTML = randomtweetinputtextes[randomtweetinputtexteszahl]
        document.getElementById("divlogin").style.display = "none"
        document.getElementById("divhome").style.display = "block"
      }
    }

    function checkbutton() {
      if (document.getElementById("input_username").value != "" && document.getElementById("input_pwd").value != "") {
        document.getElementById("login_button").classList.remove("downloadbuttonclosed")
        document.getElementById("login_button").classList.add("downloadbutton")
      } else if (true) {
        document.getElementById("login_button").classList.remove("downloadbutton")
        document.getElementById("login_button").classList.add("downloadbuttonclosed")
      }
    }

    function checktweetbutton() {
      console.log(document.getElementById("input_tweet").value.length)
      if (document.getElementById("input_tweet").value.length > 5) {
        document.getElementById("twtbutton").classList.remove("downloadbuttonclosed")
        document.getElementById("twtbutton").classList.add("downloadbutton")
      } else if (true) {
        document.getElementById("twtbutton").classList.add("downloadbuttonclosed")
        document.getElementById("twtbutton").classList.remove("downloadbutton")
      }

    }

    function login() {
      if (true) {
        tosite("home")
      }
    }

    function addtweet(id, userimg, username, tweet, likes, comments) {
      var randomtweetid = Math.floor(Math.random() * 9999999999999999)
      console.log(randomtweetid)
    }

    function likepost(id) {
      console.log(id)
      console.log(document.getElementById(id).classList[0])
      //console.log(document.getElementById(id).classList[1])
      if (document.getElementById(id).classList[0] == "far") {
        var newlikes = parseInt(document.getElementById(id).innerHTML, 10) + 1

        document.getElementById(id).innerHTML = " " + newlikes
        document.getElementById(id).classList.remove("far")
        document.getElementById(id).classList.add("fas")
        // FIVEM: ADD LIKE
      } else if (document.getElementById(id).classList[0] == "fas") {
        var newlikes = parseInt(document.getElementById(id).innerHTML, 10) - 1

        document.getElementById(id).innerHTML = " " + newlikes
        document.getElementById(id).classList.remove("fas")
        document.getElementById(id).classList.add("far")
        // FIVEM: REMOVE LIKE
      } else if (document.getElementById(id).classList[1] == "far") {
        var newlikes = parseInt(document.getElementById(id).innerHTML, 10) + 1

        document.getElementById(id).innerHTML = " " + newlikes
        document.getElementById(id).classList.remove("far")
        document.getElementById(id).classList.add("fas")
        // FIVEM: ADD LIKE
      } else if (document.getElementById(id).classList[1] == "fas") {
        var newlikes = parseInt(document.getElementById(id).innerHTML, 10) - 1

        document.getElementById(id).innerHTML = " " + newlikes
        document.getElementById(id).classList.remove("fas")
        document.getElementById(id).classList.add("far")
        // FIVEM: REMOVE LIKE
      }
    }


    function mouseOverLeft0() {
      document.getElementById("lefthome").style.color = "CadetBlue";
      document.getElementById("lefthome").style.textDecoration = "none";
      document.getElementById("lefthome").style.cursor = "context-menu";
    }

    function mouseOutLeft0() {
      document.getElementById("lefthome").style.color = "lightslategray";
    }

    function mouseOverLeft1() {
      document.getElementById("left1").style.color = "CadetBlue";
      document.getElementById("left1").style.textDecoration = "none";
      document.getElementById("left1").style.cursor = "context-menu";
    }

    function mouseOutLeft1() {
      document.getElementById("left1").style.color = "lightslategray";
    }

    function mouseOverLeft2() {
      document.getElementById("left2").style.color = "CadetBlue";
      document.getElementById("left2").style.textDecoration = "none";
      document.getElementById("left2").style.cursor = "context-menu";
    }

    function mouseOutLeft2() {
      document.getElementById("left2").style.color = "lightslategray";
    }

    function mouseOverLeft3() {
      document.getElementById("left3").style.color = "CadetBlue";
      document.getElementById("left3").style.textDecoration = "none";
      document.getElementById("left3").style.cursor = "context-menu";
    }

    function mouseOutLeft3() {
      document.getElementById("left3").style.color = "lightslategray";
    }
  </script>



</body>

</html>

无法显示溢出

Overflow is not showable

html

css

scroll

overflow