特定孩子的垂直对齐底部

Question

我有一个有2个孩子的父元素。我想将第一个孩子移到顶部，第二个孩子移到最底层。父元素有一个滚动条，其子大小不固定。子项大小会根据其内容

动态扩展

因此，如果他们的尺寸小于父母的尺寸，他们看起来就像在左图中一样，否则他们应该扩展父母div，如右图所示。通常将元素移动到边缘我会像这样使用绝对位置：

.parent {
   position: relative;
}
.top-child {
   position: absolute;
   top: 0;
}
.bottom-child {
   position: absolute;
   bottom: 0;
}

但这种情况会助长这种情况。父母的宽度和高度不会根据孩子的大小进行调整。另一种解决方案是使用vertical-align

.parent {
   display: table-cell;
   vertical-align: bottom;
}

但在这种情况下，所有孩子都会走到最低点。

此处jsfiddle。绿色背景是父母。 topdiv和bottomdiv以及儿童。

我应该CSS div如何在不破坏流量的情况下将子项附加到边缘？

Answer 1

这样的东西？

＆＃13;

＆＃13;

.main {
  width: 300px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #999;
  margin-bottom: 30px;
}
.parent {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.child-a {
  flex: 1;
  background: #ccc;
}
.child-b {
  background: #ddd;
}

＆＃13;

<div class="main">
<div class="parent">
  <div class="child-a">
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
  </div>
  <div class="child-b">
    <p>Amet ipsum dolor</p>
  </div>
</div>
</div>
<div class="main">
<div class="parent">
  <div class="child-a">
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
  </div>
  <div class="child-b">
    <p>Amet ipsum dolor</p>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以实现此用途display:table和table-row：

＆＃13;

＆＃13;

#scroller {
    height:300px; /* this height is the min height before you want to scroll */
    overflow:auto;
}
.table {
    min-height:100%;
    width:100%;
    display:table;
}
.row {
    display:table-row;
}
.row:first-child {
    height:100%; /* this is needed to "push" the second row to the bottom (it will actually be 100% minus the bottom row height */
    background:blue;
}
.row:last-child {
    background:green;
}

＆＃13;

<div id="scroller">
    <div class="table">
        <div class="row">expands to fill space</div>
        <div class="row">stays at bottom</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Example fiddle

Fiddle with content and scrolling

<强>更新

Applying my styles to your fiddle