4

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

http://i.imgur.com/SwxCYbJ.png

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

这甚至可能吗？我不介意放弃对非常旧的浏览器的支持。

4

2 回答 2

16

不要放弃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

于 2013-09-23T21:33:27.753 回答
1

试试这个。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>

于 2013-09-23T22:06:30.980 回答