Question

我有一个非常困难的CSS问题。我有以下布局（这只是Paint中的快速模型）：

我需要将红色框浮动到它的容器底部。通常我会使用position: absolute; bottom: 0;，但这会导致文本与div重叠，这是我不想要的。我希望盒子的行为与第二张图片相同（相同的情况，但文字更多）

这甚至可能吗？我不介意倾销对旧版浏览器的支持。

Answer 1

不要放弃position: absolute。只需在容器底部添加填充等于页脚div的高度。

#outer{
    position: relative;
    padding-bottom: 55px;
}

#foot{
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    left: 0;
}

没有填充：http://jsfiddle.net/cG5EH/2

使用填充：http://jsfiddle.net/cG5EH/1

Answer 2

试试这个。 calc允许您在CSS中进行计算。在示例中，我强制高度为100％，但这可以是任何值，甚至可以是height: calc(100% + 80px)。注意数学运算符周围的空格。

有关详细信息，请参阅http://css-tricks.com/a-couple-of-use-cases-for-calc/

<html>
<header>
    <style type="text/css">
        .container{
            height:100%;
            padding-bottom: 80px;
            box-sizing: border-box; //ensures the padding is part of the 100% height.
            position:relative;
            background-color: blue;
        }

        .base{
            position:absolute;
            top:calc(100% - 80px);/*80px arbitary height of the element*/
            height:80px;
            width:100%;
            background-color: yellow;
        }

    </style>
</header>
<body>
    <div class="container">
        <div class="base">
            sdfgsdfg
        </div>
    </div>
</body>

如何在不使用绝对定位的情况下将div定位到容器的底部？

2 个答案: