Jquery 相对于父对象的绝对定位

我的假设是，当使用绝对定位时，它是相对于父div的。然而，这个jsfiddle似乎与之不匹配。我试图做的是在中间一行设置一个最小高度的三行液体布局。顶部和底部有固定的高度。不幸的是，我只为IE7编写代码，没有在CSS中使用最小高度的奢侈。使用JQuery时，中心会调整大小，但页脚不会相对于父项重新定位。信息和jsfiddle如下

浏览器：IE7

样式：CSS

HTML:4.0

JQuery:1.10.1

添加位置后的提琴：相对高度100%至包装

HTML

JQuery

var resizeTimer = false;
        function doResize() {
            if ($("body").height() == 500) {
                //do nothing
            }
            else if ($("body").height() < 500) {
                $("#wrapper").height(500);
                $("#center").height(380);

            }
            else {
                $("#wrapper").height("auto");
                $("#center").height("auto");
            }
            resizeTimer = false;
        }

        $(window).on("resize", function () {
            if (resizeTimer) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(doResize, 300);
        });

var resizeTimer=false；
函数doResize（）{
如果（$（“主体”）.height（）==500）{
//无所事事
}
如果（$（“主体”）.height（）<500）{
$（“#包装”）。高度（500）；
$（“#中心”）。高度（380）；
}
否则{
$（“包装”）高度（“自动”）；
$（“#中心”）.高度（“自动”）；
}
resizeTimer=false；
}
$（窗口）。打开（“调整大小”，函数（）{
if（resizeTimer）{
clearTimeout（resizeTimer）；
}
resizeTimer=setTimeout（doResize，300）；
});

位置不是相对于父对象，而是相对于最近的父对象（或文档，如果没有父对象进行定位）

---

将父元素的

position:relative

添加到CSS中，使其具有定位，而不会实际移动到任何位置。

绝对定位是相对最近的父元素（位于父链的上游），在其上设置了位置（如

position:relative

或

position:Absolute

）。如果父链中没有父链设置了定位，则绝对定位相对于文档边界

---

如果希望

position:absolute

相对于父对象，则在父对象上设置

position:relative

。这不会改变父对象的位置，但会将子对象的位置限定为相对于父对象，而不是相对于某个更高级别的父对象或文档。

这会导致调整大小时我的div出现奇怪的消失行为。请参阅新的JSFIDDLE。在jquery中需要100%而不是自动。请参阅js fiddle at。这会导致我的div在调整大小时出现奇怪的消失行为。看看新的JSFIDLE。把它擦掉。在jquery中需要100%而不是自动。见js小提琴。你从一开始就被接受了。谢谢我还注意到，如果父对象具有

display:inline

，则定位会中断。使用父级的

display:block

修复该问题。

html, body{
    width:100%;
    height:100%;
}
#wrapper{
    background-color:blue;
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    min-width:700px;
}
#top{
    position:absolute;
    top:0px;
    width:100%;
    height:100px;
    min-width:700px;
    background-color:green;
}
#center{
    position:absolute;
    top:100px;
    bottom:20px;
    min-width:700px;
    width:100%;
    background-color:yellow;
}
#bottom{
    position:absolute;
    bottom:0px;
    min-width:700px;
    width:100%;
    height:20px;
    background-color:purple;
}

var resizeTimer = false;
        function doResize() {
            if ($("body").height() == 500) {
                //do nothing
            }
            else if ($("body").height() < 500) {
                $("#wrapper").height(500);
                $("#center").height(380);

            }
            else {
                $("#wrapper").height("auto");
                $("#center").height("auto");
            }
            resizeTimer = false;
        }

        $(window).on("resize", function () {
            if (resizeTimer) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(doResize, 300);
        });