CSS底部对齐和推送顶级内容

Question

我有一个min-height的DIV。在两个DIV .top和.bottom内。我使用position:absolute;bottom:0将.bottom与底部对齐。当顶部或底部内容太长时会出现问题。最好解释这个图像：

在这里你可以看到问题：

http://jsfiddle.net/kurtko/5hrxhmku/1/

有什么想法吗？

Answer 1

这可以通过flexbox轻松完成：

在容器上添加

.bottom {
    align-self: flex-end;
}

并在底部元素添加：

.item {
  border: 1px solid black;
  min-height: 200px;
  display: flex;
  flex-flow: row wrap;
  width: 200px;
  margin-bottom: 10px
}
.top {
  background-color: #ddd;
}
.bottom {
  background-color: yellow;
  align-self: flex-end;
}

FIDDLE

<div class="item">
  <div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
  <div class="bottom">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="item">
  <div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis nostrud exercitation.</div>
  <div class="bottom">Excepteur sint occaecat cupidatat non proident.</div>
</div>
<div class="item">
  <div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="bottom">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

Update Location : POST : http://mytelecom.com/location/{MOBILENUMBER}
Get Location : GET : http://mytelecom.com/location/{MOBILENUMBER}

Answer 2

如果您想要此结果，则可以更改 css 使用的table媒体资源，并将html 检查更改为演示

.item {border:1px solid black;min-height:200px;position:relative;width:200px;margin-bottom:10px;display:table;}

.top {display:table-row;vertical-align:top;background-color:#ddd}

.bottom {background-color:yellow;display:table-cell;vertical-align:bottom;}

<强> =============演示

.item {border:1px solid black;min-height:200px;position:relative;width:200px;margin-bottom:10px;display:table;}

.top {display:table-row;vertical-align:top;}
.top>div{background-color:#ddd}
.bottom>div {background-color:yellow;}
.bottom {display:table-cell;vertical-align:bottom;}

<div class="item">
    <div class="top">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
    </div>
    <div class="bottom">
        <div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

<div class="item">
    <div class="top">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis nostrud exercitation.</div>
    </div>
    <div class="bottom">
        <div>Excepteur sint occaecat cupidatat non proident.</div>
    </div>
</div>

<div class="item">
    <div class="top">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div class="bottom">
        <div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    </div>
</div>
        

Answer 3

这是解决方案

<强> Demo

<强> CSS：

.item {
    border:1px solid black;
    min-height:200px;
    display:flex;
    flex-flow: row wrap;
    width:200px;
    margin-bottom:10px
}
.top {
    background-color:#ddd;
    align-self: flex-start;
}
.bottom {
    background-color:yellow;
    align-self: flex-end;
    margin-top:10px;
}