使用绝对图像将流体CSS应用于中心Div内的相对Div

Question

我正在尝试做的是创建一个同时利用最佳流体大小调整和绝对定位的布局。

我所拥有的是设置大小居中的div，在其中我有div的宽度的绝对图像，在这些图像下方我有一个图例。现在我在窗口缩小时调整图像大小，但我无法正确识别图例上的行为。我想要发生的是，当我调整窗口大小时，图例会相应缩小并始终在图像下方，但从不重叠。而对于我的生活，我无法解决这个问题。

代码如下（你也可以在这里查看jsFiddle http://jsfiddle.net/Sonictail/2cms6/1/）;

CSS

html, body {
    margin:0;
    padding:0;
}
#container {
    position:relative;
    min-width: 640px;
    max-width: 1044px;
    max-height: 200px;
    height:100%;
    margin:0 auto;
    padding:0;
    background-color:red;
    z-index:0;
}
#shim {
    position: relative;
    float:left;
    min-width:640px;
    max-width: 100%;
    height:100%;
}
#legend {
    position:relative;
    float:left;
    bottom:0;
    left:0;
    min-width:640px;
    max-width:1024px;
    height:200px;
    background-color:blue;
    z-index:20;
}
img {
    position:absolute;
    top:0;
    left:0;
    min-width:640px;
    max-width: 100%;
    background-color:green;
    float:left;
    z-index:1;
}

HTML

<div id="container">
    <div id="map">
        <img src="image.png" />
        <img src="image.png" />
    </div>
    <div id="shim">&nbsp;</div>
    <div id="legend">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra, est tempor rhoncus dapibus, elit tellus convallis enim, ac ornare felis diam eget velit. Proin a lorem erat. Nulla orci tortor, ornare et erat consequat, porttitor mattis purus. Vestibulum at neque quis neque elementum egestas quis non magna. Aenean porttitor arcu mattis urna sollicitudin, non euismod mauris consequat. In magna erat, viverra vitae urna convallis, sodales lobortis nibh. Quisque suscipit tincidunt lacus, id varius nunc lacinia sed. Proin at nunc consectetur, tincidunt ligula non, bibendum nisl. Suspendisse euismod ac metus vel posuere. Praesent ipsum risus, pellentesque in lectus adipiscing, egestas faucibus risus. Aliquam volutpat odio id pulvinar scelerisque. Maecenas convallis eleifend ante, non feugiat odio viverra nec.</p>
    </div>
</div>

Answer 1

我试图做的是使用min / max-width＆amp; amp;以及与绝对div相同的方式调整相对div的大小。不使用jQuery的高度。顶部的绝对图像填满了一切。

我全力以赴。你可以在这里查看jsFiddle http://jsfiddle.net/Sonictail/rd3eq/1/，我用来修改高度的js如下。没什么好看的。

jQuery(document).ready(function ($) {
    resizeDiv();
});

var resizeTimer;
jQuery(window).resize(function ($) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeDiv, 100);

});

var resizeDiv = function () {
    var img = document.getElementById('mapHeight');

    var height = img.clientHeight;

    jQuery("#shim").css("height", height);
};