Question

我希望绿色div在蓝色div下方而不是在它之上而不更改它们的position值和仅使用纯css。

http://jsfiddle.net/LpjgLydv/40/

这可能吗？

假设：

我可能只使用内联css
这适用于需要停留在底部的页脚，无论页面上有多少内容
页面上除页脚（以及html，head，body）之外的任何其他元素在任何给定时间可能存在也可能不存在
页脚嵌套在<body>中，不能放在其他任何地方

Answer 1

我明白了。基本上我必须为html属性添加相对位置和最小高度以及body属性的margin-bottom：

http://jsfiddle.net/LpjgLydv/44/

<强> HTML

<html>
    <head>

    </head>
    <body>
        <div class="box"></div>
        <div class="box2"></div>
    </body>
</html>

<强> CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 250px;
}
.box
{
    border: solid 10px blue;
    position: relative;
    height:900px;
    width:380px;
    margin-top: 5px;
    margin-left: 8px;
}
.box2
{
    border: solid 10px green;
    position: absolute;
    bottom:0px;
    left:8px;
    height: 180px;
    width: 380px;
}

现在符合问题中所有假设的标准。

Answer 2

您无需定位即可使用此功能。

.inner-box
{
    border: solid 10px blue;
    height:900px;
    width:380px;
    margin-top: 5px;
    float:left;

}
.inner-box2
{
    border: solid 10px green;
    float:left;
    bottom:0px;
    height: 180px;
    width: 380px;
    clear:both;
}

迫使div到底

2 个答案: