0

我的假设是在使用绝对定位时，它是相对于父 div 的。但是，这个 jsfiddle 似乎与此不相符。我正在尝试做的是在中间行设置最小高度的三行液体布局。顶部和底部具有固定的高度。不幸的是，我只为 IE7 编写代码，并且没有在我的 CSS 中使用 min-height 的奢侈。使用 JQuery 时，中心会调整大小，但是，页脚不会相对于父项重新定位。下面的信息和jsfiddle。

浏览器：IE7

样式：CSS

HTML：4.0 严格

jQuery：1.10.1

jsfiddle

将位置添加后小提琴：相对和高度 100% 到包装器jsfiddle

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="center"></div>
    <div id="bottom"></div>
</div>

CSS

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;
}

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);
        });
4

2 回答 2

1

该位置与父级无关，它相对于最近的具有定位的父级（或文档，如果没有父级具有定位）。

添加position:relative到父元素的 CSS 以使其具有定位，而无需实际将其移动到任何地方。

于 2013-09-20T17:15:43.010 回答
1

绝对定位是相对最近的父级（沿父级链向上）设置了位置（如position: relative或position: absolute）。如果父链中没有父链有定位设置，那么绝对定位是相对于文档边界的。

如果要position: absolute相对于父级，则position: relative在父级上设置。这不会改变父级的位置，但会将子级的定位范围限定为相对于父级而不是相对于某个更高级别的父级或文档。

于 2013-09-20T17:15:50.947 回答