Question

我有一个已知高度的父div和一个已知高度的子div。父div中也有未知数量的内容。如果内容小于父div的高度，则父div不会滚动，子div应出现在div的底部。如果内容比父div更多，则父div应该滚动，并且在滚动之后，子div应该出现在父div的底部，在文档的流程中。

编辑：我需要支持IE9，所以，不幸的是，flexbox是不可能的。

以下小提琴显示了我的意思：

https://jsfiddle.net/5208Lcdq/

在第一个div中，BOTTOM应该在滚动后出现（好像它被定位：静态而不是绝对）。在第二个，它应该像它一样，绝对定位。

有没有办法可以在没有javascript的情况下检测父级的滚动高度？

＆＃13;

.outer {
  position: relative;
  width:100px;
  height:100px;
  overflow-y:auto;
  margin: 50px;
  border: 1px solid black;
}

.bottom {
    margin-top: 10px;
    position: absolute;
    bottom: 0;
  }

＆＃13;

<div class="outer">
<div class="content">
This is some content
This is some content
This is some content
This is some content
This is some content
This is some content

</div>
<div class="bottom">
BOTTOM
</div>
</div>

<div class="outer">
<div class="content">
This is some content
</div>
<div class="bottom">
BOTTOM
</div>
</div>

＆＃13;

Answer 1

我相信你要求的是：https://jsfiddle.net/5208Lcdq/6/

代码：

<div class="outer">
  <div class="content">
    This is some content
    This is some content
    This is some content
    This is some content
    This is some content
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

CSS

.outer {
  position: relative;
  width:100px;
  height:100px;
  overflow-y:auto;
  margin: 50px;
  border: 1px solid black;
}

.bottom {
    margin-top: 10px;
    position: relative;
    bottom: 0;
  }
 .content{
     min-height: 70px;
  }

Answer 2

如果我理解的话，

flex可能是可能的：

.outer {
  height: 100px;
  width: 11em;
  overflow: auto;
  display: inline-flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 20px;
  border: 1px solid black;
}
.content {
  flex: 1;
}
.bis {
  height:150px;
  }

<div class="outer">
  <div class="content">
    This is some content This is some content This is some content This is some content This is some content This is some content

  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>
<div class="outer bis">
  <div class="content">
    No matter what height No matter what height No matter what height No matter what height No matter what height This is some content This is some content This is some content This is some content This is some content This is some content

  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer bis">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

将元素放在父元素的底部，可以滚动也可以不滚动

2 个答案: