时间戳

首页 > 解决方案 > 我的代码的哪一部分使滚动条不出现？

html - 我的代码的哪一部分使滚动条不出现？

问题描述

我正在尝试重现一个页面，但我在 div 中有一个容器，它比浏览器中显示的要大，但我无法向下滚动条（滚动条不会出现在任何浏览器中）并且有些内容是隐藏的，我看不到。我可以做什么 ？我对css完全陌生，对不起，如果这是一个愚蠢的问题

body {
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}


/** TOP DO SITE **/

#cabecalho {
  background-image: url(https://i.imgur.com/abduQsx.png);
  margin: 0 auto;
  position: fixed;
  width: 100%;
  height: 233px;
}

#logo {
  position: absolute;
  top: 10px;
  left: 160px;
}

#topo {
  position: absolute;
  top: 10px;
  left: 750px;
}


/** BARRA DE NAVEGAÇÃO **/

nav {
  min-width: 400px;
  position: absolute;
  top: 120px;
  left: 160px;
}

a {
  text-decoration: none;
  color: white;
  padding: 15px 20px;
  background-color: #b10333;
  display: block;
}

a:hover {
  background-color: #69001d;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#teste ul,
li {
  float: left;
}

#teste {
  position: absolute;
  top: 120px;
  left: 150px;
}

body.Home #teste a#Home,
body.Brasil #teste a#Brasil,
body.Internacional #teste a#Internacional,
body.Economia #teste a#Economia,
body.Saude #teste a#Saude,
body.Ciencia #teste a#Ciencia {
  background: #de003e;
  cursor: text;
}


/** COLUNAS **/

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 380px 380px 380px;
  width: 1200px;
  height: 600px;
  border: 1px solid red;
  position: relative;
  margin: 0 auto;
  top: 210px;
}

.coluna-1 {
  border: 1px solid red;
  background-color: yellow;
}

.coluna-2 {
  border: 1px solid red;
  background-color: blue;
}

.coluna-3 {
  border: 1px solid red;
  background-color: black;
}
<!DOCTYPE html>
<html>

<head>
  <title>Noticias Cidade - Home</title>
  <link rel="stylesheet" href="folha_css.css">

</head>

<body class="Home">
  <div id="cabecalho">
    <img url="https://i.imgur.com/8EhUFuZ.png" id="logo">
    <img url="https://i.imgur.com/3ZjPU9A.png" id="topo">
    <ul id="teste">
      <li>
        <a id="Home" href="index.html">Home</a>
      </li>
      <li>
        <a id="Brasil" href="Brasil.html">Brasil</a>
      </li>
      <li>
        <a id="Internacional" href="Internacional.html">Internacional</a>
      </li>
      <li>
        <a id="Economia" href="Economia.html">Economia</a>
      </li>
      <li>
        <a id="Saude" href="Saude.html">Saude</a>
      </li>
      <li>
        <a id="Ciencia" href="Ciencia.html">Ciencia</a>
      </li>
    </ul>>

    <div class="container">
      <div class="coluna-1">

      </div>
      <div class="coluna-2">

      </div>
      <div class="coluna-3">

      </div>

    </div>

  </div>
</body>

</html>

标签： htmlcss

解决方案

这是position: fixed;您设置#cabecalho的阻止该 div 滚动的设置。

推荐阅读