时间戳

首页 > 解决方案 > 折叠列表溢出

html - 折叠列表溢出

问题描述

我正在做一个学校项目，我刚刚遇到了一个问题，它被折叠到一个输入框中（我稍后会应用过滤器列表）但是当这个列表显示它溢出我的登陆屏幕并且看起来很糟糕。有没有人有任何建议来解决这个问题我正在尝试模仿这个页面（注意你如何点击输入框并且在用户输入内容之前列表不会显示）我尽力在我的代码中模仿它?

这是我的 HTML 的图像。

$(document).ready(function() {
  var header = $('#landing_home');

  var backgrounds = new Array(

    'url(Recursos/imagenes_bg/bridge.jpeg)', 'url(Recursos/imagenes_bg/lake.jpeg)', 'url(Recursos/imagenes_bg/mountain.jpg)', 'url(Recursos/imagenes_bg/river.jpeg)', 'url(Recursos/imagenes_bg/villa.jpeg)'
  );

  var current = 0;
  //Fuente para animar el fondo: https://stackoverflow.com/questions/53547736/animate-changing-backgrounds , yo hice la pregunta por eso esta mi codigo ahi.
  function nextBackground() {
    header.animate({
      opacity: 0.5
    }, 0);
    current++;
    current = current % backgrounds.length;
    //header.fadeTo("slow", 0.5)
    header.css('background-image', backgrounds[current]).animate({
      opacity: 1
    }, 'slow');
    //header.fadeTo("slow", 1)
  }
  setInterval(nextBackground, 7000);

  header.css('background-image', backgrounds[0]).animate({
    opacity: 1
  }, 'slow');

});
body,
html {
  height: 100%;
}

.logo {
  width: 75%;
  height: 75%;
  opacity: 1;
}

.home {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
}

.text_home {
  color: white;
  font-size: 400%;
  font-weight: 500;
  text-align: center;
  text-shadow: 1px 1px 10px #000000;
}

.form_home {
  text-align: center;
}

.form_home input[type=text] {
  width: 75%;
  box-shadow: 1px 1px 10px #000000;
  padding: 8px;
  text-align: justify;
  font-size: 200%;
}

.form_list {
  font-size: 150%;
}

.list-group {
  display: block;
  margin: 0 auto;
}

.home_jumbo {
  background-color: #B1B1B1;
}
<!DOCTYPE html>
<html>

<head>
  <title>Trip Guru</title>
  <meta charset="utf-8" />
  <link href="main.css" rel="stylesheet" />
  <link href="Content/bootstrap-grid.css" rel="stylesheet" />
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <div class="home" id="landing_home">
    <nav class="navbar bg-transparent sticky-top">
      <a class="navbar-brand" href="index.html"><img src="Recursos/Logo/logo_white.png" class="logo" /></a>
    </nav>
    <h1 class="text_home"> Decubre tu siguiente destino </h1>
    <div class="form_home">
      <input type="text" class="form_home" placeholder="Buscar" data-toggle="collapse" data-target="#paises" />
    </div>

    <ul class="list-group collapse text-center w-75 form_list" id="paises">
      <li class="list-group-item">Rusia</li>
      <li class="list-group-item">Corea del Sur</li>
      <li class="list-group-item">Japón</li>
      <li class="list-group-item">Costa Rica</li>
      <li class="list-group-item">Dubai</li>
      <li class="list-group-item">Suecia</li>
      <li class="list-group-item">Alemania</li>
      <li class="list-group-item">Francia</li>
      <li class="list-group-item">Brasil</li>
      <li class="list-group-item">China</li>
    </ul>
  </div>
  <div class="jumbotron-fluid home_jumbo">
    <h1 class="display-1">It overflows here</h1>
  </div>

  <script src="main_script.js"></script>
  <script src="scripts/jquery-3.3.1.min.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <!--Bootstrap JS-->
</body>

</html>

标签： htmlcss

解决方案

如果我理解正确，您只需要在该部分上插入此open部分：

max-height: 500px;
overflow-y: auto;

这将限制大小并仅在垂直方向上溢出

推荐阅读