2

Buen día , estoy diseñando una pagina web para un proyecto de la facultad en el cual se puede consultar sobre materias, temas ,etc.

Estoy utilizando Bootstrap para poder modelar la página, pero estoy teniendo un problema. El footer, la parte que dice @Copyright y hora , se me posiciona en la mitad de la pantalla, cuando en realidad deseo que se ubique al final de todo.

Una teoría que tengo es que el main no tenga el tamaño suficiente como para que el footer este en el lugar correcto.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/Principal.css">
  <title>Principal</title>
</head>

<body>
  <header>
    <div class="container text-center border-bottom border-danger mt-2">
      <h3 class="header mt-1">Rodrigo Gonzalez Arias</h3>
    </div>
  </header>
  <main>
    <div class="Container">
      <div class="container row border rounded border-danger boton">
        <div>
          <img src="https://img.icons8.com/color/70/000000/java-coffee-cup-logo.png" alt="Logo">
          <a href="" class="ml-3">Programación</a>
        </div>
      </div>
      <div class="container row border rounded border-danger boton">
        <div>
          <img src="https://img.icons8.com/color/70/000000/networking-manager.png" alt="Logo">
          <a href="" class="ml-3">Redes</a>
        </div>
      </div>
      <div class="container row border rounded border-danger boton">
        <div>
          <img src="https://img.icons8.com/color/70/000000/statistics.png" alt="Logo">
          <a href="" class="ml-3">Analisis</a>
        </div>
      </div>
    </div>
  </main>
  <footer class="page-footer">
    <div class="container row">
      <h3 class="col-4" style="font-size: 11px">Hora : 12:02:24</h3>
      <h3 class="col-8" style="font-size: 10px">@Copyright Universidad de Belgrano</h3>
    </div>
  </footer>
</body>

</html>

introducir la descripción de la imagen aquí

1 respuesta 1

2

Bootstrap tienen clases específicas para indicar posicionamiento. Dichas clases se pueden aplicar a los elementos para posicionarlos de manera fija o absoluta y en diferentes lugares de la pantalla.

En particular tienes la clase fixed-bottom que (traducción mía):

Posiciona un elemento en la parte inferior de la pantalla, de esquina a esquina. Asegúrate de entender las ramificaciones de usar posición fixed en tu proyecto, puede necesitar de CSS adicional.

Entonces puedes usar la clase .fixed-bottom en el footer para que se quede pegado a la parte inferior de la página. Aquí puedes ver tu código tan sólo añadiendo esa clase:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/Principal.css">
  <title>Principal</title>
</head>

<body>
  <header>
    <div class="container text-center border-bottom border-danger mt-2">
      <h3 class="header mt-1">Rodrigo Gonzalez Arias</h3>
    </div>
  </header>
  <main>
    <div class="Container">
      <div class="container row border rounded border-danger boton">
        <div>
          <img src="https://img.icons8.com/color/70/000000/java-coffee-cup-logo.png" alt="Logo">
          <a href="" class="ml-3">Programación</a>
        </div>
      </div>
      <div class="container row border rounded border-danger boton">
        <div>
          <img src="https://img.icons8.com/color/70/000000/networking-manager.png" alt="Logo">
          <a href="" class="ml-3">Redes</a>
        </div>
      </div>
      <div class="container row border rounded border-danger boton">
        <div>
          <img src="https://img.icons8.com/color/70/000000/statistics.png" alt="Logo">
          <a href="" class="ml-3">Analisis</a>
        </div>
      </div>
    </div>
  </main>
  <footer class="page-footer fixed-bottom">
    <div class="container row">
      <h3 class="col-4" style="font-size: 11px">Hora : 12:02:24</h3>
      <h3 class="col-8" style="font-size: 10px">@Copyright Universidad de Belgrano</h3>
    </div>
  </footer>
</body>

</html>


Si no quieres usar fixed-bottom porque no quieres las "ramificaciones" que trae el posicionamiento fixed (el pie se vería todo el tiempo, deberías añadir margen/padding al cuerpo de la página para que no se superponga el pie al contenido), puedes implementar otros métodos.

La página de Bootstrap contiene un par de ejemplos con código específico para que el pie de página se quede abajo del todo. Uno de ellos usa posición absolute y lo puedes ver aquí:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}

Tu Respuesta

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

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