保证金最高100% - 父母的高度

Question

我有以下布局来构建:

基本上,我需要三个不同高度的div和不同的标题高度,从它们的父级顶部100%定位,减去标题的高度.我可以用jQuery做这个,但这是一个响应式网站,所以我想保持它尽可能基于CSS(否则我将不得不处理$(window).resize(),根据我的经验,这可能是不可靠的).

这可能,也许使用CSS3 calc功能？

谢谢.

Answer 1

因此,您可以尝试将内容(橙色容器)粘贴到蓝色容器的底部(取决于您可以使用的html结构position: absolute,或margin-top橙色容器).

你可以将标头(绿色)容器放在橙色容器内,并将其置于绝对顶部-100%(橙色位置必须为absolute或relatve).

如果你要添加你的html,那么很容易找到更精确的解决方案.

JSFIDDLE的一个例子

CSS:

.box{
   background: #f00;
   height: 150px;
   width: 100%;
   position: relative;
   padding: 20px;
   padding-bottom: 0;
}
.column{
    background: #0f0;
    width: 30%;
    position: relative;
    top: 100%
}
.header{
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #00f;
 }

HTML:

<div class="box">
    <div class="column">
        <div class="header">
           header 
        </div>
        aaaaaaa<br/>
        aaaaaa
    </div>    
</div>