Create Sticky DIV at the bottom of the screen

Question

Create Sticky DIV at the bottom of the screen

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I would like to create a sticky div (I think that's what they're called) that is always at the bottom of the screen, I'm using the floating panels of the "Lobipanel" library and I want to create a container for one of these panels that is always centered below, something like this:

I have achieved this by using the bootstrap properties in this way

<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>

The problem is that if I click on the part at the bottom of the panel does not click on the map, for example, if I try to use the "+" button of google maps it does not work because the div that I use as a container covers the entire width of the screen.

What do I have to do to make the container only occupy the space determined by the panel and not the entire width of the screen? Is there any other way to achieve what I'm trying to do without using the "navbar-fixed-bottom" navbar class (which I think is what makes my container occupy the entire width)?

html css bootstrap

asked by JAlan 16.03.2017 в 17:17

source

3 answers

Error "Column count does not match value count at row 1" in java [closed] syntax error, unexpected 'else' (T_ELSE) [closed]

score 1 · Answer 1

1

Place the parent Div an automatic width, so that it fits the size of its content.

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

If this does not work for you, try it like that.

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

answered by 16.03.2017 в 17:30

score 1 · Answer 2

You can create a DIV

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

And add CSS

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

With the pointer-events property of CSS you can disable the click on the element

#footer {
  pointer-events: none;
}

score 0 · Answer 3

The problem is that if I click on the part at the bottom of the panel it does not click on the map , for example, if I try to use the "+" button on google maps it does not work because The div that I use as a container covers the entire width of the screen.

When you make a fixed element, it does not respect the space occupied by the other elements of the document. For example, try pressing the button in the following example:

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>

You will see that it is impossible for you, and this is normal, because the footer does not care who is behind it, he is absolute.

Solution

The solution is simply to give a margin-bottom to the penultimate element (the one before footer ). This margin must be equal to or greater than the footer high:

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>