2

Estoy haceiendo un sitio web tengo un problema con el footer con el responsive.

Aclaro que arriba del footer hay texto e imagenes y si hago esto:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

el footer me queda en medio.

.footer {
background-image: url("https://i.sstatic.net/AZ2Xw.png");
background-position: center center;
background-repeat: no-repeat;
position: absolute;
margin-top: 580px;
width: 100%;
height: 300px; /* Set the fixed height of the footer here */
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="stn" >
<link rel="icon" href="favicon.ico">
<title>Electrocer San Telmo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<footer class="footer">
<div class="container text-white">
<br>
<div class="row">
<div class="col-md-4 col-lg-2">
<h4>Facebook</h4>
<p><i class="fab fa-facebook"></i> <a href="#">/usuario</a></p>
</div>
<div class="col-md-4 col-lg-4">
<h4 id="contacto">Contacto</h4>
<p>San Telmo</p>
<p>Direcci&oacute;n: CABA - Buenos Aires<br>
Tel&eacute;fonos:<br>
eMail:</p>
</div>
<div class="col-md-4 col-lg-6">
<p>
Maoa
</p>
</div>
</div>
</div>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>

2
  • No se entiende muy bien cual es el problema, tienes algún resultado esperado?
    – user22721
    Commented el 24 may. 2018 a las 4:38
  • Perdon, modifique la publicacion. El problema es con el responsive, cuando lo veo desde el celular el footer tapa los textos que estan arriba
    – user71533
    Commented el 24 may. 2018 a las 4:42

1 respuesta 1

3

Ya que estás utilizando Bootstrap 4 y este se basa en flexbox, puedes utilizar un sticky-footer que utilice flex y de esta manera no depender de un alto fijo como en el pasado.

Necesitamos el <div class='main'></div> para que ocupe el espacio necesario y el footer se "pegue" al final de la pantalla.

El código quedaría así (ejecutalo a pantalla completa para ver el resultado):

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

.footer {
  background-image: url("https://i.sstatic.net/AZ2Xw.png");
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 300px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div class='main'></div>
<footer class="footer">
  <div class="container text-white">
    <br>
    <div class="row">
      <div class="col-12 col-md-4 col-lg-2">
        <h4>Facebook</h4>
        <p><i class="fab fa-facebook"></i> <a href="#">/usuario</a></p>
      </div>
      <div class="col-12 col-md-4 col-lg-4">
        <h4 id="contacto">Contacto</h4>
        <p>San Telmo</p>
        <p>Direcci&oacute;n: CABA - Buenos Aires<br> Tel&eacute;fonos:
          <br> eMail:
        </p>
      </div>
      <div class="col-12 col-md-4 col-lg-6">
        <p>
          Maoa
        </p>
      </div>
    </div>
  </div>
</footer>

4
  • muchas gracias....
    – user71533
    Commented el 24 may. 2018 a las 5:44
  • gracias nuevamente... no sabia cuanto habia cambiado bootstrap y la verdad no soy diseñador y trato de ir aprendiando un poco de esta manera, que por ahora vengo bien... je
    – user71533
    Commented el 24 may. 2018 a las 5:49
  • De nada @Sebastian :D flexbox es lo mejor que le pudo haber pasado a la web ( a menos que necesites dar soporte para IE9 :( )
    – user22721
    Commented el 24 may. 2018 a las 5:51
  • no lo sabia... voy a estudiarlo asi para la proxima ya no tengo que estar a las apuradas resolviendo problemas... al menos no de este tipo que no es mi campo... je
    – user71533
    Commented el 24 may. 2018 a las 6:02

Tu Respuesta

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