vertical-alignment - 垂直对齐 2 个不同大小的 div

Question

我在父框中有 2 个 div。

我想让上面的一个占父框的 70%，第二个占其他 30%。我不想使用绝对位置。

有任何想法吗？

**********************
* top div            *
* top div            *
* top div            *
* top div            *
* top div            *
* top div            *
**********************
* bottom div         *
**********************

编辑：父框是浮动的，

#mright {
    width : 45%;
    float:right;
    margin-right: 5%;
}

Answer 1

就像我上面评论的那样。这是你想要的吗？

#top{
    width: 100%;
    height: 70%;
}

#parent{
    width: 45%;
    height: 80%;
    border: 1px solid black;
    float: right;
    margin: 5%;
}

#bottom{
    width: 100%;
    height: 30%;
}

小提琴。

Answer 2

是的，让浮动：离开两个div；喜欢：

#parentDiv{ width:100%; }
#topDiv{ width:70%; }
#bottomDiv{ width: 30%; }
#topDiv,#bottomDiv{ float:left; }

Answer 3

使用jQuery：

$(window).resize(function () {
    $('.topDiv').height(($(window).height() / 10) * 7);
    $('.bottomDiv').height(($(window).height() / 10) * 3);
    $('.bottomDiv').css('margin-top', $('.topDiv').height());
    $('.bottomDiv').css('margin-left', $('.topDiv').width() * -1);
});
$('.topDiv').height(($(window).height() / 10) * 7);
$('.bottomDiv').height(($(window).height() / 10) * 3);
$('.bottomDiv').css('margin-top', $('.topDiv').height());
$('.bottomDiv').css('margin-left', $('.topDiv').width() * -1);

http://jsfiddle.net/Hive7/PzVCR/1/