2

Mi css

  html,body{
        height: 100%
    }
    
    .footer {
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 60px;
        background-color: #f5f5f5;
      }

HTML

    <footer class="footer bg-dark">
      <div class="copyright text-center my-auto">
          <span>Proyecto - Gestion Clinica dental</span>
      </div>
    </footer>

Es imposible que el footer baje a abajo , he probado con height:100% en el container pero funciona bien solo cuando la pagina no es mas grande que la pantalla.

Es un proyecto personal pero me gustaría acabarlo

edit: aqui esta el html del container

<body>

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                <nav class="navbar navbar-expand-md navbar-dark bg-dark">
                    <a class="navbar-brand" href="#">DentalRenew</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown active">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Clientes
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <a class="dropdown-item" href="#">Listado</a>
                              <a class="dropdown-item" href="#">Alta Cliente</a>
                              <a class="dropdown-item" href="#">Añadir tratamiento</a>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Citas
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <a class="dropdown-item" href="#">Listado</a>
                              <a class="dropdown-item" href="#">Programar cita</a>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Empleados
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <a class="dropdown-item" href="#">Listado</a>
                              <a class="dropdown-item" href="#">Alta empleado</a>
                              <a class="dropdown-item" href="#">Añadir puesto</a>
                            </div>
                        </li>


                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Facturacion
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <a class="dropdown-item" href="#">Añadir Presupuesto</a>
                              <a class="dropdown-item" href="#">Configurar Presupuesto</a>
                              <a class="dropdown-item" href="#">Estadisticas</a>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Usuarios
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <a class="dropdown-item" href="#">Listado</a>
                              <a class="dropdown-item" href="#">Registrar nuevo usuario</a>
                            </div>
                        </li>

                      </ul>
                    </div>
                </nav>
            </div>
                <!-- End of Topbar -->
                <div class="container">
                        <div class="card shadow mb-4 mt-5">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Alta cita</h6>
                            </div>
                            <div class="card-body">
                                <form>
                                  <h6 class="m-0 font-weight-bold text-primary">Datos cita</h6>
                                  <hr>
                                    <div class="form-row">
                                      <div class="form-group col-md-6">
                                        <label for="inputEmail4">Cliente</label>
                                        <input type="email" class="form-control" id="inputEmail4" placeholder="Cliente">
                                      </div>
                                      <div class="form-group col-md-6">
                                        <label for="inputPassword4">Fecha</label>
                                        <input type="password" class="form-control" id="inputPassword4" placeholder="15/02/1995">
                                      </div>
                                    </div>
                                    <div class="form-row">
                                      <div class="form-group col-md-6">
                                        <label for="inputEmail4">Dentista asignado</label>
                                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                                      </div>
                                      <div class="form-group col-md-6">
                                        <label for="inputCity">Diagnostico</label>
                                        <select class="form-control">
                                          <option value="volvo">Ortodoncia aguda</option>
                                          <option value="saab">Muelitis</option>
                                        </select>
                                      </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Alta</button>
                                  </form>
                              </div>
                    </div>
                </div>
            <!-- End of Main Content -->

            <!-- Footer -->
            <footer class="footer bg-dark">
              <div class="copyright text-center my-auto">
                  <span>Proyecto - Gestion Clinica dental </span>
              </div>
            </footer>
            <!-- End of Footer -->

        </div>
        <!-- End of Content Wrapper -->

    <!-- Bootstrap core JavaScript-->

    <!-- Custom scripts for all pages-->
    <script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>
    <script src="js/sb-admin-2.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body>

</html>

analizando con el inspector me queda asi

introducir la descripción de la imagen aquí

5
  • ¿Que version de bootstrap usas? ¿y que clases tiene tu body? Pon el html para que lo podamos ver mejor
    – masterguru
    Commented el 11 ene. 2022 a las 12:46
  • tengo la version 4, añado html del container
    – thc
    Commented el 11 ene. 2022 a las 12:57
  • Sigo sin ver la version de bootstrap, ni se si tu body tiene clases o no
    – masterguru
    Commented el 11 ene. 2022 a las 13:03
  • he editado el post con mas info
    – thc
    Commented el 11 ene. 2022 a las 13:06
  • Mirate la respuesta de Jheyman Mejia, a mi me funciona con tu código
    – masterguru
    Commented el 11 ene. 2022 a las 13:26

3 respuestas 3

4

No necesitas CSS adicional, con las clases de Bootstrap bastan.

Como bien te indican en los comentarios, lo primero que debes hacer es darle un alto mínimo a tu <body>, lo consigues con .min-vh-100, adicional puedes hacerlo flexible y con contenido en columnas, con esto logras que el <footer> se pueda posicionar de arriba a abajo.

<body class="d-flex flex-column min-vh-100">

Lo último que deberías hacer es añadir la clase .mt-auto al elemento <footer>, es lo mismo que decir: margin-top: auto.

Y el resto lo realiza automático flexbox.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="d-flex flex-column min-vh-100">
  <h1>Hola</h1>

  <footer class="mt-auto footer bg-dark">
    <div class="copyright text-center text-light my-auto">
      <span>Proyecto - Gestion Clinica dental</span>
    </div>
  </footer>

</body>

Añado edición con tu código, recuerda quitar el CSS innecesario.

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

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>DentalRenew - Gestion de clinicas dentales </title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <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="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <link href="css/custom.css" rel="stylesheet">

</head>

<body class="d-flex flex-column min-vh-100">


  <!-- Main Content -->
  <div id="content">

    <!-- Topbar -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">DentalRenew</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Clientes
                            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Listado</a>
              <a class="dropdown-item" href="#">Alta Cliente</a>
              <a class="dropdown-item" href="#">Añadir tratamiento</a>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Citas
                            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Listado</a>
              <a class="dropdown-item" href="#">Programar cita</a>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Empleados
                            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Listado</a>
              <a class="dropdown-item" href="#">Alta empleado</a>
              <a class="dropdown-item" href="#">Añadir puesto</a>
            </div>
          </li>


          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Facturacion
                            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Presupuesto</a>
              <a class="dropdown-item" href="#">Estadisticas</a>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Usuarios
                            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Listado</a>
              <a class="dropdown-item" href="#">Registrar nuevo usuario</a>
            </div>
          </li>

        </ul>
      </div>
    </nav>
  </div>
  <!-- End of Topbar -->
  <div class="container main">
    <div class="card shadow mb-4 mt-5">
      <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Gastos y ingresos</h6>
      </div>
      <div class="card-body">
        <div class="row">
          <canvas id="ingresos"></canvas>
        </div>
      </div>
    </div>

    <div class="card shadow mb-4 mt-5">
      <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Nº de empleados</h6>
      </div>
      <div class="card-body">
        <div class="row">
          <canvas id="n_empleados"></canvas>
        </div>
      </div>
    </div>
  </div>
  <!-- End of Main Content -->

  <!-- Footer -->
  <footer class="mt-auto footer bg-dark">
    <div class="copyright text-center text-light my-auto">
      <span>Proyecto - Gestion Clinica dental</span>
    </div>
  </footer>
  <!-- End of Footer -->

  </div>
  <!-- End of Content Wrapper -->

  <!-- Bootstrap core JavaScript-->

  <!-- Custom scripts for all pages-->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="js/sb-admin-2.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="js/chart.js"></script>

  <script>
    const labels = [
      'Enero',
      'Febrero',
      'Marzo',
      'Abril',
      'Mayo',
      'Junio',
      'Julio',
      'Agosto',
      'Septiembre',
      'Octubre',
      'Noviembre',
      'Diciembre',
    ];

    const data = {
      labels: labels,
      datasets: [{
          label: 'Ingresos',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 1000, 2000, 3000, 4000, 5000, 6000, 0, 1000, 2000, 3000, 4000, 5000, 6000],
        },
        {
          label: 'Gastos',
          backgroundColor: 'rgb(51, 116, 255)',
          borderColor: 'rgb(51, 116, 255)',
          data: [0, 2000, 2000, 3000, 4000, 5000, 6000, 0, 1000, 2000, 3000, 4000, 5000, 6000],
        }
      ]
    };

    const configIG = {
      type: 'line',
      data: data,
      options: {}
    };

    const myChart = new Chart(
      $('#ingresos').attr('id'),
      configIG
    );


    const numeroEmpleados = new Chart(
      $('#n_empleados').attr('id'),
      configIG
    );
  </script>

</body>

</html>

7
  • Esta solución a mi me funciona bien en mis pruebas.
    – masterguru
    Commented el 11 ene. 2022 a las 13:14
  • ami me queda asi como lo pongo aqui jsfiddle.net/7Lnbkoda
    – thc
    Commented el 11 ene. 2022 a las 13:26
  • parece que funciona bien pero cuando quitas los estilos que tenia como position absolute , fijate en el jsfiddle que he puesto , asi es como yo lo veia ( lo acabo de editar)
    – thc
    Commented el 11 ene. 2022 a las 13:30
  • En el jsfiddle no has puesto las clases en el body
    – masterguru
    Commented el 11 ene. 2022 a las 13:32
  • si , solo era una demostracion de como me quedaba , con lo Jheyman Mejia ha puesto ya funciona.
    – thc
    Commented el 11 ene. 2022 a las 13:38
1

Debes agregar position: absolute; para que el bottom: 0; sea del fondo de tu documento

Si quieres evitar espacios entre el footer y el final del document, añade margin: 0; o margin-bottom: 0; al body del mismo.

html,body {
    height: 100%;
    margin: 0;
}
    
.footer {      
    position:absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}
0

Si el footer está después de .content, yo creo que añadiendo esto te debería valer

.content {
  min-height: calc(100% - 60px); /* 60px que es la altura del footer */
}

Pero mira a ver que creo que los div no los tienes bien cerrados. Después de cerrar el nav cierras un div que creo que no tendrías que hacer. Y por el final tienes un "End Content Wrapper" pero creo que no hay un bloque con esa clase que abra eso

3
  • puede que sea mejor poner position:fixed ? es que el footer se queda clavado en el botton de la pantalla y no baja mas abajo.
    – thc
    Commented el 11 ene. 2022 a las 13:10
  • Yo las veces que he necesitado poner el footer justo abajo uso esto, y al footer no le hago nada. Si quieres que quede algo más arriba o abajo puedes ajustar el segundo valor de la resta (a veces los margin pueden hacer que no quede perfecto)
    – msalinas
    Commented el 11 ene. 2022 a las 13:15
  • Acabo de copiar tu HTML para hacer una prueba. Lo que te digo deberías de aplicarlo sobre .content, no sobre .container. Pero mira a ver que no se si están todos los div bien cerrados. Después de cerrar el nav cierras un div que creo que no tendrías que hacer. Y por el final tienes un "End Content Wrapper" pero creo que no hay clase que abra eso
    – msalinas
    Commented el 11 ene. 2022 a las 13:27

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.