Position element at bottom of div

问题

Does anyone know a way to have a footer stuck to the bottom of a div like a position: fixed element. The methods I've found all stick it at the bottom of the starting view or at the bottom so you have to scroll all the way down to see them.

I have tried setting the parent to position:relative and the child to position: absolute, and also using display: table-cell and vertical-align: bottom, but neither keep it stuck in place as you scroll, instead they leave it static at the bottom of the div or at the bottom of the default view.

.a{
  position:relative;
  background-color:#ccc;
  width:500px;
  min-height: 150px;
  max-height: 150px;
  overflow-y: scroll;
  float:left;
  padding:8px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:#666;
  color:#fff;
}

<div class="a">
    Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
    <div class="footer">Some text</div>
</div>

回答1:

You can't really, not the way you want to, and you'd need to use jquery to keep moving the position.

What you can do, which is the easiest solution, is to have a container wrapping the entire area.

.outer {
    position:relative;
    width:500px;
}

.a{
  background-color:#ccc;
  min-height: 150px;
  max-height: 150px;
  overflow-y: scroll;
  padding:8px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:#666;
  color:#fff;
}

  <div class="outer">
    <div class="a">
       Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
    </div>
    <div class="footer">Some text</div>
  </div>

回答2:

The issue here is that you can't use position: fixed on an element (only works on viewport), but you want the footer element to sit in a fixed position relative to it's parent.

You can do that by wrapping the scrollable div and setting the footer to the bottom of that wrap element. Since the wrap doesn't scroll (the element inside of it does), the footer won't move when you scroll.

See this fiddle.

html, body {
    margin: 0;
    padding: 0;
}

.wrap {
    background-color:#ccc;
    position: relative;
}

.a {
  height: 150px;
  overflow-y: scroll;
}

.b {
    margin-top: 300px;
    padding-bottom: 20px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  background-color:#666;
  color:#fff;
    width: 100%;
}

<div class="wrap">
    <div class="a">
        top
        <div class="b">bottom</div>
    </div>
    <div class="footer">Some text</div>
</div>

来源：https://stackoverflow.com/questions/33621120/position-element-at-bottom-of-div

标签

html

css

css-position