响应式web设计中绝对定位子对象的CSS父级高度百分比

事实上，我正在设计一款响应性强的设计，我被卡住了：

我需要将图像类型的子对象在其div父对象中的位置设置为绝对，并将较低的部分保留在此父对象下。但实际上，我唯一的解决方案是为这个父对象设置一个固定的高度（在这种情况下，较低部分的相对边距在动态结构中不起作用）。问题是，设置为最大宽度的图像：100%；要保持其尺寸的灵活性，请随页面展开，并且下部在“调整大小”上的位置不再合适：

<div id='page'>
<div id='b0'><img /><img /></div>
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section>
</div>

有人能解决这个问题吗

---

提前感谢

好的，我现在有一个非常简单的混合解决方案，使用CSS和Javascript： 由于主要需求是“移动优先”设计，我在Smartphone目标媒体查询css文件中为图像容器引入了un min height：

在head标签中：

<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' />

还有一点Javascript：

$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :( this.innerWidth * .25)+'px'})}});

因此，这个混合解决方案需要激活Javascript，为每个媒体查询步骤设置最小高度，以及使用全局和最大页面维度计算的容器高度百分比：在我的例子中：

#page{max-width: 1024px;}

容器高度约为280px

希望有一天这能帮助别人；-）

更简单的解决方案：

包括将每个图像设置为位置：绝对；除了最后一个：

#b0 img:last-child{position: relative;

将图元保留在“整体”中可为其父图元提供所需的高度值

#page{max-width: 1024px;}

#b0 img:last-child{position: relative;