Question

我想知道是否有某种CSS相当于：

float: down;

或以某种方式使元素或div转到页面底部。任何帮助表示赞赏。

Answer 1

使用flexbox，您可以将子元素设置为align-self: flex-end。

Example Here

.parent {
    display: flex;
}
.child {
    align-self: flex-end;
}

＆＃13;

.parent {
    height: 200px;
    border: 5px solid #000;
    display: flex;
}
.child {
    height: 40px;
    width: 100%;
    background: #f00;
    align-self: flex-end;
}

＆＃13;

<div class="parent">
    <div class="child">
        Align to the bottom
    </div>
</div>

＆＃13;

或者，您必须使用absolute / fixed定位。

Example Here

.align-bottom {
    position: absolute;
    bottom: 0;
}

在某些情况下，您还必须相对定位父元素，以便绝对定位相对。

＆＃13;

body {
    min-height: 100vh;
}
.align-bottom {
    position: absolute;
    bottom: 0;
}

＆＃13;

<div class="align-bottom">Align to the bottom</div>

＆＃13;

Answer 2

您可以这样设置：

bottom: 0;
position: fixed;

我想你也会喜欢这个：

z-index: 9999;

即使滚动页面，以上所有内容也会使元素粘在底部。

是否有一个等价于float的CSS：down

2 个答案: