方框绝对位于底部，如果在方框上方有内容，则方框将向下

Question

我有css的问题，我做html布局，需要让蓝盒坐在底部以上的搜索框，如果有一个内容以上的蓝盒，那么蓝盒将下降，所以有一个差距比文蓝盒和内容上方。但如果没有内容，bluebox将位于搜索框的底部。

你可以在这里看到html：

http://projects.elixirbox.com/lanrex/test.html

你可以明白我这里的意思-- http://projects.elixirbox.com/lanrex/view.png

谢谢

Answer 1

我认为你需要使用“粘性页脚”技术，使用负边距。你的页脚(或者在你的例子中，Call to Action-box)唯一的下边需要有一个固定的高度。

如果你需要动态高度，你需要使用javascript。但是使用相同的带有一些默认高度的粘性脚注css，然后用JS调整它，这样它就不仅仅是纯JS了。

https://gist.github.com/1855032或http://ryanfait.com/sticky-footer/

Answer 2

我希望你是这样的：

.greybox {
    background: none repeat scroll 0 0 lightgrey;
    padding: 20px;
}

.bluecorner {
    background: url("../images/bg_blue_corner.jpg") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    margin-top: 20px;
    padding: 0;
    width: 315px;
}

并且没有必要定义position-absolute到.bluecorner，我们可以根据您的图像正常使用页边距-顶部来获得所需的结果。

看我怎么做的裁判图片......

​

​