0

Me gustaría crear un sticky div (creo que así se les llama) que siempre este en la parte de abajo de la pantalla, estoy utilizando los paneles flotantes de la librería "Lobipanel" y quiero crear un contenedor para uno de estos paneles que siempre este abajo centrado, algo como de esta forma:introducir la descripción de la imagen aquí

Lo he logrado utilizando las propiedades de bootstrap de esta forma

<div class="navbar navbar-fixed-bottom">
    <div  class="container">
        <div class="row">
            <div id="eventos" class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <h5>Eventos</h5>
                    </div>
                </div>
                <div class="panel-body">
                    Olas prros
                </div>
            </div>
        </div>
    </div>
</div>

El problema es que si hago click en la parte en el fondo del panel no hace click en el mapa, por ejemplo, si intento utilizar el boton "+" de google maps no funciona por que el div que utilizo como contenedor abarca todo el ancho de la pantalla.

¿Que tengo que hacer para que el contenedor solo ocupe el espacio determinado por el panel y no todo el ancho de la pantalla? ¿Existe alguna otra forma de lograr lo que intento hacer sin utilizar la clase "navbar navbar-fixed-bottom" (que creo que es lo que hace que mi contenedor ocupe todo el ancho)?

3 respuestas 3

1

Colocale al Div padre un ancho automático, para que se ajuste al tamaño de su contenido.

.navbar-fixed-bottom{width:auto;}

Si esto no te funciona inténtalo asi.

.navbar-fixed-bottom{width: auto !important;}
3
  • Lo he intentado y no ha funcionado, es extraño, yo también pienso que debería de funcionar con la solución que diste. image.ibb.co/m3GUdv/Sin_t_tulo.png
    – JAlan
    Commented el 16 mar. 2017 a las 16:39
  • Ok, ya identifique el problema, ademas de lo que dije anteriormente debes hacer esto .navbar-fixed-bottom container{ margin-right: 0; margin-left: 0; width:250px;} el with colocalo a tu gusto Commented el 16 mar. 2017 a las 16:44
  • @AntonioSierraHurtado, editar tu pregunta con el código que colocaste en tu comentario anterior. Commented el 17 mar. 2017 a las 14:41
1

Puedes crear un DIV

<div id="footer">Footer</div>

Y agregar CSS

#footer {
    position: fixed;
    bottom: 0;
    width: 70%;
}

Con la propiedad pointer-events de CSS puedes deshabilitar el click en el elemento

#footer {
  pointer-events: none;
}
0

El problema es que si hago click en la parte en el fondo del panel no hace click en el mapa, por ejemplo, si intento utilizar el boton "+" de google maps no funciona por que el div que utilizo como contenedor abarca todo el ancho de la pantalla.

Cuando haces un elemento fijo, este no respeta el espacio ocupado por los demás elementos del documento. Por ejemplo, intenta pulsar el botón en el siguiente ejemplo:

article {
  background-color: #00aaee;
  height: 200px;
  margin: 0 auto;
  position: relative;
  width: 80%;
}

article button {
  background-color: #ffd700;
  border: none;
  border-radius: 3px;
  bottom: 20px;
  color: #fff;
  left: 50%;
  padding: 8px 14px;
  position: absolute;
  transform: translateX(-50%);
}

footer {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  height: 100px;
  position: fixed;
  width: 100%;
}
<article>
  <button onclick="alert('¡Gracias!')">¡Púlsame!</button>
</article>
<footer></footer>

Verás que te es imposible, y esto es normal, porque al footer no le importa quién esté detrás de él, él es absoluto.

Solución

La solución es simplemente darle un margin-bottom al penúltimo elemento (el que está antes del footer). Este margen debe ser igual o mayor al alto del footer:

article {
  background-color: #00aaee;
  height: 250px;
  margin: 0 auto;
  margin-bottom: 170px;
  position: relative;
  width: 80%;
}

article button {
  background-color: #ffd700;
  border: none;
  border-radius: 3px;
  bottom: 20px;
  color: #fff;
  left: 50%;
  padding: 8px 14px;
  position: absolute;
  transform: translateX(-50%);
}

footer {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  height: 150px;
  position: fixed;
  width: 100%;
}
<article>
  <button onclick="alert('¡Gracias!')">¡Púlsame!</button>
</article>
<footer></footer>

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.