Question

我有一些div设置为100％高度（页面），body和Html也设置为100％高度。直行，看起来很好。接下来我试图添加一些位于底部的元素，但它不是到达屏幕底部可见的底部，而是坐在底部，好像“底部”是底部的底部没有“身高：100％;”......

基本上，高度：100％设置div的高度，但不设置底部的高度。如果这有意义（对我而言）。

此处的实例：http://careers.dept.shef.ac.uk/MOOCs/STAR

白色圆圈/箭头的东西应该靠近屏幕的底部，但是它位于深蓝色框的底部，而浅蓝色的底部将没有高度css。我很困惑。

任何？

提前致谢

Answer 1

在你需要放在底部的元素上试试这个：

element {
position: absolute;
bottom: 0;
}

并将其应用于父元素：

element{
position: relative;
}

Demo

Answer 2

你可以只为它添加一个边距，它会将其向下推，而不会像position:absolute;那样影响居中。

.arrow {
    width: 122px;
    height: 121px;
    background-image: url('arrows.png');
    z-index: 1;
    cursor: pointer;
    transition: all 1s ease 2s;
    position: relative;
    margin: 300px auto;
}

我在边距上添加了300px，看起来很棒。希望这有帮助！

高度100％和“底部”不能一起工作

2 个答案: