动态和自定义div定位

Question

我有这个div结构

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

外部div是jQuery resizable 我试图用百分比来定位div，

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

作品完美，我得到了这个

现在我被困在如何得到这个：

有什么帮助吗？ 不要忘记外部div可以调整大小..

Here是我的出发点。

修改
我也试过了

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

但这不适用于IE＆lt; 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

.panel {
    position: relative
} 

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

通过将父/外div设置为相对位置，将内部div设置为绝对，您可以这样做。

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

Answer 3

很简单。 ;）

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

Answer 4

你可以试试这个：

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%;
}

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

您必须自己检查完整的跨浏览器兼容性， 我已经用我的浏览器检查了它，并且它对所有这些都很好：

• safari 5
• opera 11
• firefox 3.5
• firefox 4