jquery - 制作堆叠的响应 block ，在调整大小时改变高度和宽度

Question

我想创建如下所示的 3 block 布局:

_________
|   |   |
|   |___|
|   |   |
---------

宽度基于百分比。 padding-bottom 也是如此，以使框响应高度和宽度。

CSS 看起来像这样:

#block-home header {
    position: relative;
    padding-bottom: 60%;
    width: 60%;
    float: left;
    background-color: green;
}
#block-home footer {
    position: relative;
    padding-bottom: 32%;
    width: 40%;
    float: right;
    background-color: red;
}
#block-home aside {
    position: relative;
    padding-bottom: 23%;
    width: 40%;
    float: right;
    clear: right;
    background-color: blue;
}

我的问题是第 1 个和第 3 个 block 的底部边框从未对齐。通过更改浏览器的宽度，它们会错位。

这里有什么可能的解决方案？

jsfiddle

Answer 1

你面临的问题是padding-bottom是根据元素的宽度计算的so。您将需要使用 height 属性。

参见 here :

Percentages refer to the width of the containing block

要实现您的布局，您可以在右侧 block 或左侧 block 上使用 position:absolute;，以便它们/它适应另一个 block 的高度。

这是一个 FIDDLE 将右侧的 2 个 block 设置为 position: absolute;

CSS 代码:

#block-home{
    position:relative;
}

#block-home header {
    position: relative;
    padding-bottom: 60%;
    width: 60%;
    background-color: green;
}
#block-home footer {
    position: absolute;
    top:0;
    left:60%;
    height:70%;
    width: 40%;
    background-color: red;
}
#block-home aside {
    position: absolute;
    top:70%;
    left:60%;
    height:30%;
    width: 40%;
    background-color: blue;
}