jquery - 动态和自定义 div 定位

Question

我有这个 div 结构

<div class="panel">
    <div class="north"></div>
    <div class="center"></div>
</div>

外部 div 是jQuery 可调整大小 的 我试图用百分比定位 div，

.north{height:30%}
.center{height:70%}

完美运行，我收到了

现在我被困在如何得到这个问题上：有

什么帮助吗？
请不要忘记外部 div 是可调整大小的..

这是我的出发点。

编辑
我也试过

.panel{display:table;}
.north,.center{display:table-row;}

但这不适用于 IE<8

Answer 1

另一个使用花车的解决方案：http: //jsfiddle.net/KMWw4/2/

.panel {
    width:  300px;
    height: 500px; /* explicit height */
    float: left;
}
.north {
    float: left; display: inline; /*iefix*/
    width:  100%;
}
.center {
    height: 100%;
}

.panel-percent .north {
    height: 30%; /* you can use percentages */
}
.panel-fixed .north {
    height: 100px; /* ... or pixel height */
}

​

Answer 2

很简单。;)

1. 使用 position:absolute 和 top:0 定位 150px 对象。（您可能也需要将左右设置为零）
2. 将动态高度区域的上边距设置为 150px。

Answer 3

你可以试试这个：

http://jsfiddle.net/KSY6T/3/

.panel{
    min-height:150px;height:300px;overflow:hidden;position:relative;
    /* height:300px; is optional, i just used it for demonstrational purposes */
}

.north{
    position:absolute;top:0px;width:100%;height:150px;
}

.center{
    margin-top:150px;height:100%;
}

只需调整父容器的大小，看看会发生什么......

你必须自己检查完整的跨浏览器兼容性，我已经用我的浏览器检查过了，它在所有浏览器上都运行良好：

• 野生动物园 5
• 歌剧 11
• 火狐3.5
• 火狐4

Answer 4

.panel {
    position: relative
} 

.center { 
    position: absolute;
    top: 150px;
    bottom: 0px;
}

通过将父/外部 div 设置为相对位置，将内部 div 设置为绝对位置，您可以执行这样的技巧。

更新的小提琴：http: //jsfiddle.net/PnnMa/1/