css - 元素被迫在容器外

Question

你能强制容器内的元素扩展到容器之外吗？

a.

container{
width:985px;
margin:0 auto;
}

footer{ 
i need to force this outside of the container
}

希望这是有道理的。

Answer 1

CSS:

.container{
    width:985px;
    margin:0 auto;
    position:relative;
    padding-bottom:130px; /* height of footer + 30px (your own) */
    background:yellow;
}

.footer{ 
    position:absolute;
    left:-25px; /* (1045 - 985) / 2 */
    bottom:0; /* stick to bottom */
    width:1045px; height:100px;
    background:#CCCCCC;
}

HTML:

<div class="container">
    Container Area
    <div class="footer">
        Footer Area
    </div>
</div>

预览: