Question

我实际上正在制作响应式设计，而且我很困惑：

我需要在div父级中将image-type子元素的位置设置为绝对值，并将下部区域保留在此父级之下。但实际上，我唯一的解决方案是为这个父项设置一个固定的高度（在这种情况下，下部的相对余量不会在动态结构中起作用）。问题是图像设置为max-width：100％;保持其尺寸灵活，随页面扩展，下部不再调整大小：

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

CSS：

#page{max-width:1024px; margin: 0 auto;}
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */
#b0 img{position: absolute;}

有人有解决方案吗？

提前感谢

Answer 1

更简单的解决方案：

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

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

将元素保留在“flood”中为其父级提供所需的高度值。

Answer 2

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

在head标签中：

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

然后是CSS：

#b0{position: relative; min-height:82px;}

还有一点Javascript：

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

因此，此混合解决方案需要激活Javascript，为每个媒体查询步骤设置最小高度，并使用全局和最大页面尺寸计算容器高度的百分比：在我的情况下：

#page{max-width: 1024px;}

，容器高度约为280px;

希望有一天这可以帮助某人; - ）

响应式网页设计中绝对定位子项的CSS父高度百分比

2 个答案: