Tema: Problema con divs
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 28/02/2018, 03:18
sergiodueso
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con divs
Os pongo lo más relevante del código.
Código CSS: 
Ver original
  1. <style>
  2. html, body{
  3. height: 100vh;
  4. }
  5.  
  6. .slider-inicio{
  7. background:url("imagenes/fondo1.jpg");
  8. height: 100vh;
  9. background-size: cover;
  10. background-position: center;
  11. }
  12. .fondo-galeria1{
  13. background:url("imagenes/back5.jpg");
  14. height: 100vh;
  15. background-size: cover;
  16. background-position: center;
  17. }
  18. </style>
Código HTML: 
Ver original
  1. <body>
  2. <!-- Menú --> 
  3. <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  4. <a data-scroll class="navbar-brand" href="#inicio">
  5. <img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
  6. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  7. <span class="navbar-toggler-icon"></span>
  8. </button>
  9.  
  10. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  11. <ul class="navbar-nav mr-auto text-center">
  12. <li class="nav-item active">
  13. <a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
  14. </li>
  15. <li class="nav-item">
  16. <a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
  17. </li>
  18. <li class="nav-item">
  19. <a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
  20. </li>
  21. <li class="nav-item">
  22. <a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
  23. </li>
  24. <li class="nav-item">
  25. <a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
  26. </li>
  27. <li class="nav-item">
  28. <a data-scroll class="nav-link" href="#galeria">Galería</a>
  29. </li>
  30. <li class="nav-item">
  31. <a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
  32. </li>
  33. <li class="nav-item">
  34. <a data-scroll class="nav-link" href="#contacto">Contacto</a>
  35. </li>
  36. </ul>
  37. </div>
  38. </nav>
  39. <!-- Fin menú -->
  40. <!-- Inicio -->
  41. <div class="container-fluid slider-inicio d-flex justify-content-center align-items-center" id="inicio">
  42. <div class="row flex-column">
  43. <div class="col-12 d-flex justify-content-center align-items-center pb-5"><img class="img-fluid" src="imagenes/turibamba.png"/></div>
  44. <h4 class="font-weight-bold d-flex justify-content-center pt-5">C/ Batalla de Arápiles, 24 (La Almozara)</h4>
  45. </div>
  46. </div>
  47. <!-- Fin del Inicio-->
  48.  
  49. <!-- Inicio de cumpleaños -->
  50. <div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="cumpleaños">
  51. <div class="container">
  52. <div class="card-deck">
  53. <div class="card">
  54. <img class="card-img-top" src="imagenes/Slide-1.jpg" alt="Card image cap">
  55. <div class="card-body">
  56. <h5 class="card-title">Card title</h5>
  57. <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  58. <a class="btn btn-primary" href="#" role="button">Link</a>
  59. </div>
  60. </div>
  61. <div class="card">
  62. <img class="card-img-top" src="imagenes/Slide-2.jpg" alt="Card image cap">
  63. <div class="card-body">
  64. <h5 class="card-title">Card title</h5>
  65. <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  66. <a class="btn btn-primary" href="#" role="button">Link</a>
  67. </div>
  68. </div>
  69. <!-- Fin de cumpleaños -->
  70.  
  71. <!-- Inicio Jumbotron Animaciones-->
  72. <div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="animaciones">
  73. <div class="row flex-column">
  74. <div class="col-12 d-flex justify-content-center pb-3">
  75. <h1>Animaciones</h1>
  76. </div>
  77. </div>
  78. <div class="jumbotron rounded-0">
  79. <div class="container">
  80. <h1 class="display-3">Hello, world!</h1>
  81. <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  82. <hr class="my-4">
  83. <div class="d-flex justify-content-between align-items-center">
  84. <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  85. <p class="lead">
  86. <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  87. </p>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <!-- Fin Jumbotron animaciones -->
  93.  
  94. <!-- Inicio Jumbotron despedidas-->
  95. <div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="despedidas">
  96. <div class="row flex-column">
  97. <div class="col-12 d-flex justify-content-center pb-3">
  98. <h1>Despedidas</h1>
  99. </div>
  100. </div>
  101. <div class="jumbotron mt-5 rounded-0">
  102. <div class="container">
  103. <h1 class="display-3">Hello, world!</h1>
  104. <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  105. <hr class="my-4">
  106. <div class="d-flex justify-content-between align-items-center">
  107. <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  108. <p class="lead">
  109. <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  110. </p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>

Ahora sí que funciona pero porque he puesto overflow auto y entonces aparecen las barras de scroll. Pero yo no quiero que aparezcan y se vea todo el contenido, uno detrás de otro sin que se superpongan.
Sólo os he puesto 3 divs pero hay más. Gracias.