1

He estado haciendo pruebas en https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic con el siguiente código pero tengo un problema. Quiero tener una barra de navegación fija, en la parte superior de la ventana y que el contenido de cada pestaña sea scrolleable.

Ahora mismo, con "fixed-top", el navbar se queda fijo pero tapa el contenido. introducir la descripción de la imagen aquí

No me vale con poner en CSS un "height" que sea igual al tamaño del "navbar" (ni ponerle al body un padding-top) porque este puede variar si se hace más pequeña la ventana o se añaden tabs.

introducir la descripción de la imagen aquí

En esta imagen, he desactivado el fixed, he hecho la ventana un poco menos ancha y el "height" del "navbar" a cambiado. Por tanto esa solución no me sirve.

¿Alguna idea de como solucionarlo?

Si no se puede de esta forma, ¿se podría poner un div, debajo de la barra de navegación, que se ajuste al tamaño de la ventana en lo ancho y alto (ocupe todo menos la parte del navBar) y además sea scrolleable cuando la ventana sea más pequeña que el contenido?

He probado con un <div class="container-fluid"> pero no me funciona.

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav>
  <div class="nav nav-tabs fixed-top" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam sagittis facilisis. Ut ac enim metus. Mauris ullamcorper, diam ullamcorper consectetur imperdiet, justo massa eleifend quam, non hendrerit lacus arcu ac nisl. Nunc quis tellus et justo mattis vestibulum. Nulla pretium tincidunt tortor eget laoreet. In rhoncus sagittis ex, vitae hendrerit sem eleifend vitae. Nunc placerat vitae tortor et luctus.

Nam finibus arcu erat, quis maximus massa auctor iaculis. In hac habitasse platea dictumst. Nulla mollis placerat leo, vitae faucibus arcu. Proin at sapien eu nisl semper lobortis. Donec neque tortor, convallis eget purus a, dictum ornare felis. Donec sagittis diam neque. Sed sagittis sodales imperdiet. Nulla facilisi. Nunc dignissim ac dui et ultricies. Maecenas nec molestie libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Donec elementum dolor mi. Quisque nec iaculis elit. Pellentesque rhoncus sodales pellentesque. In quis lorem magna. Phasellus ultricies cursus accumsan. Aliquam sapien sem, finibus quis enim nec, pharetra mattis mi. Aliquam ac dictum enim, non vehicula nunc.

Ut sit amet lorem at mauris aliquet porta. Phasellus ultricies ante elit, id laoreet lorem molestie ac. In lobortis posuere quam sit amet vulputate. Sed pellentesque eget urna non eleifend. Phasellus leo nisi, rutrum ac massa quis, dictum lacinia sem. Nam tincidunt odio ac mollis facilisis. Ut non convallis nisi, id egestas elit.

Aliquam venenatis dolor nec ex egestas, lacinia pretium lorem iaculis. Cras vel dui sed nulla viverra dignissim in vel dui. Aliquam id ullamcorper ante. Ut non nisl orci. Fusce dapibus dignissim est ut malesuada. Sed bibendum est malesuada interdum rutrum. Curabitur sodales leo nisi, a pellentesque leo consectetur a. Sed interdum finibus elit ac eleifend. Cras rutrum massa vitae urna venenatis tincidunt. Phasellus nisl lacus, laoreet eu ultrices ut, rhoncus et ipsum. Fusce semper pulvinar facilisis. Sed quis magna ut nulla venenatis commodo.
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam sagittis facilisis. Ut ac enim metus. Mauris ullamcorper, diam ullamcorper consectetur imperdiet, justo massa eleifend quam, non hendrerit lacus arcu ac nisl. Nunc quis tellus et justo mattis vestibulum. Nulla pretium tincidunt tortor eget laoreet. In rhoncus sagittis ex, vitae hendrerit sem eleifend vitae. Nunc placerat vitae tortor et luctus.

Nam finibus arcu erat, quis maximus massa auctor iaculis. In hac habitasse platea dictumst. Nulla mollis placerat leo, vitae faucibus arcu. Proin at sapien eu nisl semper lobortis. Donec neque tortor, convallis eget purus a, dictum ornare felis. Donec sagittis diam neque. Sed sagittis sodales imperdiet. Nulla facilisi. Nunc dignissim ac dui et ultricies. Maecenas nec molestie libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Donec elementum dolor mi. Quisque nec iaculis elit. Pellentesque rhoncus sodales pellentesque. In quis lorem magna. Phasellus ultricies cursus accumsan. Aliquam sapien sem, finibus quis enim nec, pharetra mattis mi. Aliquam ac dictum enim, non vehicula nunc.

Ut sit amet lorem at mauris aliquet porta. Phasellus ultricies ante elit, id laoreet lorem molestie ac. In lobortis posuere quam sit amet vulputate. Sed pellentesque eget urna non eleifend. Phasellus leo nisi, rutrum ac massa quis, dictum lacinia sem. Nam tincidunt odio ac mollis facilisis. Ut non convallis nisi, id egestas elit.

Aliquam venenatis dolor nec ex egestas, lacinia pretium lorem iaculis. Cras vel dui sed nulla viverra dignissim in vel dui. Aliquam id ullamcorper ante. Ut non nisl orci. Fusce dapibus dignissim est ut malesuada. Sed bibendum est malesuada interdum rutrum. Curabitur sodales leo nisi, a pellentesque leo consectetur a. Sed interdum finibus elit ac eleifend. Cras rutrum massa vitae urna venenatis tincidunt. Phasellus nisl lacus, laoreet eu ultrices ut, rhoncus et ipsum. Fusce semper pulvinar facilisis. Sed quis magna ut nulla venenatis commodo.
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam sagittis facilisis. Ut ac enim metus. Mauris ullamcorper, diam ullamcorper consectetur imperdiet, justo massa eleifend quam, non hendrerit lacus arcu ac nisl. Nunc quis tellus et justo mattis vestibulum. Nulla pretium tincidunt tortor eget laoreet. In rhoncus sagittis ex, vitae hendrerit sem eleifend vitae. Nunc placerat vitae tortor et luctus.

Nam finibus arcu erat, quis maximus massa auctor iaculis. In hac habitasse platea dictumst. Nulla mollis placerat leo, vitae faucibus arcu. Proin at sapien eu nisl semper lobortis. Donec neque tortor, convallis eget purus a, dictum ornare felis. Donec sagittis diam neque. Sed sagittis sodales imperdiet. Nulla facilisi. Nunc dignissim ac dui et ultricies. Maecenas nec molestie libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Donec elementum dolor mi. Quisque nec iaculis elit. Pellentesque rhoncus sodales pellentesque. In quis lorem magna. Phasellus ultricies cursus accumsan. Aliquam sapien sem, finibus quis enim nec, pharetra mattis mi. Aliquam ac dictum enim, non vehicula nunc.

Ut sit amet lorem at mauris aliquet porta. Phasellus ultricies ante elit, id laoreet lorem molestie ac. In lobortis posuere quam sit amet vulputate. Sed pellentesque eget urna non eleifend. Phasellus leo nisi, rutrum ac massa quis, dictum lacinia sem. Nam tincidunt odio ac mollis facilisis. Ut non convallis nisi, id egestas elit.

Aliquam venenatis dolor nec ex egestas, lacinia pretium lorem iaculis. Cras vel dui sed nulla viverra dignissim in vel dui. Aliquam id ullamcorper ante. Ut non nisl orci. Fusce dapibus dignissim est ut malesuada. Sed bibendum est malesuada interdum rutrum. Curabitur sodales leo nisi, a pellentesque leo consectetur a. Sed interdum finibus elit ac eleifend. Cras rutrum massa vitae urna venenatis tincidunt. Phasellus nisl lacus, laoreet eu ultrices ut, rhoncus et ipsum. Fusce semper pulvinar facilisis. Sed quis magna ut nulla venenatis commodo.
  </div>
</div>

</body>
</html>

1 respuesta 1

1

Creo que con este CSS es suficiente, inclusive el margin-top seria a gusto tuyo.

.tab-content{
  margin-top: 10px;
}
nav{
  position: sticky;
  top: 0;
  background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam sagittis facilisis. Ut ac enim metus. Mauris ullamcorper, diam ullamcorper consectetur imperdiet, justo massa eleifend quam, non hendrerit lacus arcu ac nisl. Nunc quis tellus et justo mattis vestibulum. Nulla pretium tincidunt tortor eget laoreet. In rhoncus sagittis ex, vitae hendrerit sem eleifend vitae. Nunc placerat vitae tortor et luctus.

Nam finibus arcu erat, quis maximus massa auctor iaculis. In hac habitasse platea dictumst. Nulla mollis placerat leo, vitae faucibus arcu. Proin at sapien eu nisl semper lobortis. Donec neque tortor, convallis eget purus a, dictum ornare felis. Donec sagittis diam neque. Sed sagittis sodales imperdiet. Nulla facilisi. Nunc dignissim ac dui et ultricies. Maecenas nec molestie libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Donec elementum dolor mi. Quisque nec iaculis elit. Pellentesque rhoncus sodales pellentesque. In quis lorem magna. Phasellus ultricies cursus accumsan. Aliquam sapien sem, finibus quis enim nec, pharetra mattis mi. Aliquam ac dictum enim, non vehicula nunc.

Ut sit amet lorem at mauris aliquet porta. Phasellus ultricies ante elit, id laoreet lorem molestie ac. In lobortis posuere quam sit amet vulputate. Sed pellentesque eget urna non eleifend. Phasellus leo nisi, rutrum ac massa quis, dictum lacinia sem. Nam tincidunt odio ac mollis facilisis. Ut non convallis nisi, id egestas elit.

Aliquam venenatis dolor nec ex egestas, lacinia pretium lorem iaculis. Cras vel dui sed nulla viverra dignissim in vel dui. Aliquam id ullamcorper ante. Ut non nisl orci. Fusce dapibus dignissim est ut malesuada. Sed bibendum est malesuada interdum rutrum. Curabitur sodales leo nisi, a pellentesque leo consectetur a. Sed interdum finibus elit ac eleifend. Cras rutrum massa vitae urna venenatis tincidunt. Phasellus nisl lacus, laoreet eu ultrices ut, rhoncus et ipsum. Fusce semper pulvinar facilisis. Sed quis magna ut nulla venenatis commodo.
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam sagittis facilisis. Ut ac enim metus. Mauris ullamcorper, diam ullamcorper consectetur imperdiet, justo massa eleifend quam, non hendrerit lacus arcu ac nisl. Nunc quis tellus et justo mattis vestibulum. Nulla pretium tincidunt tortor eget laoreet. In rhoncus sagittis ex, vitae hendrerit sem eleifend vitae. Nunc placerat vitae tortor et luctus.

Nam finibus arcu erat, quis maximus massa auctor iaculis. In hac habitasse platea dictumst. Nulla mollis placerat leo, vitae faucibus arcu. Proin at sapien eu nisl semper lobortis. Donec neque tortor, convallis eget purus a, dictum ornare felis. Donec sagittis diam neque. Sed sagittis sodales imperdiet. Nulla facilisi. Nunc dignissim ac dui et ultricies. Maecenas nec molestie libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Donec elementum dolor mi. Quisque nec iaculis elit. Pellentesque rhoncus sodales pellentesque. In quis lorem magna. Phasellus ultricies cursus accumsan. Aliquam sapien sem, finibus quis enim nec, pharetra mattis mi. Aliquam ac dictum enim, non vehicula nunc.

Ut sit amet lorem at mauris aliquet porta. Phasellus ultricies ante elit, id laoreet lorem molestie ac. In lobortis posuere quam sit amet vulputate. Sed pellentesque eget urna non eleifend. Phasellus leo nisi, rutrum ac massa quis, dictum lacinia sem. Nam tincidunt odio ac mollis facilisis. Ut non convallis nisi, id egestas elit.

Aliquam venenatis dolor nec ex egestas, lacinia pretium lorem iaculis. Cras vel dui sed nulla viverra dignissim in vel dui. Aliquam id ullamcorper ante. Ut non nisl orci. Fusce dapibus dignissim est ut malesuada. Sed bibendum est malesuada interdum rutrum. Curabitur sodales leo nisi, a pellentesque leo consectetur a. Sed interdum finibus elit ac eleifend. Cras rutrum massa vitae urna venenatis tincidunt. Phasellus nisl lacus, laoreet eu ultrices ut, rhoncus et ipsum. Fusce semper pulvinar facilisis. Sed quis magna ut nulla venenatis commodo.
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam sagittis facilisis. Ut ac enim metus. Mauris ullamcorper, diam ullamcorper consectetur imperdiet, justo massa eleifend quam, non hendrerit lacus arcu ac nisl. Nunc quis tellus et justo mattis vestibulum. Nulla pretium tincidunt tortor eget laoreet. In rhoncus sagittis ex, vitae hendrerit sem eleifend vitae. Nunc placerat vitae tortor et luctus.

Nam finibus arcu erat, quis maximus massa auctor iaculis. In hac habitasse platea dictumst. Nulla mollis placerat leo, vitae faucibus arcu. Proin at sapien eu nisl semper lobortis. Donec neque tortor, convallis eget purus a, dictum ornare felis. Donec sagittis diam neque. Sed sagittis sodales imperdiet. Nulla facilisi. Nunc dignissim ac dui et ultricies. Maecenas nec molestie libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Donec elementum dolor mi. Quisque nec iaculis elit. Pellentesque rhoncus sodales pellentesque. In quis lorem magna. Phasellus ultricies cursus accumsan. Aliquam sapien sem, finibus quis enim nec, pharetra mattis mi. Aliquam ac dictum enim, non vehicula nunc.

Ut sit amet lorem at mauris aliquet porta. Phasellus ultricies ante elit, id laoreet lorem molestie ac. In lobortis posuere quam sit amet vulputate. Sed pellentesque eget urna non eleifend. Phasellus leo nisi, rutrum ac massa quis, dictum lacinia sem. Nam tincidunt odio ac mollis facilisis. Ut non convallis nisi, id egestas elit.

Aliquam venenatis dolor nec ex egestas, lacinia pretium lorem iaculis. Cras vel dui sed nulla viverra dignissim in vel dui. Aliquam id ullamcorper ante. Ut non nisl orci. Fusce dapibus dignissim est ut malesuada. Sed bibendum est malesuada interdum rutrum. Curabitur sodales leo nisi, a pellentesque leo consectetur a. Sed interdum finibus elit ac eleifend. Cras rutrum massa vitae urna venenatis tincidunt. Phasellus nisl lacus, laoreet eu ultrices ut, rhoncus et ipsum. Fusce semper pulvinar facilisis. Sed quis magna ut nulla venenatis commodo.
  </div>
</div>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.