Question

无论如何，绝对定位的孩子是否可以扩展以填充其相对定位的父母？（父母的身高不固定）这是我做的，它与Firefox和IE7，但不是IE6正常工作。：（

<div id="parent">
    <div id="child1"></div>
</div>

#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }

Answer 1

这很容易。诀窍是同时设置top: 0px和bottom: 0px

这是工作代码

html, body {
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

#parent { 
    display: block;
    background-color: #ff0;
    border: 1px solid #f00;
    position: relative; 
    width: 200px; 
    height: 100%;
}
#child1 { 
    background-color: #f00; 
    display: block;
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px;
    top: 0px; 
    bottom: 0px;
}

在这里查看一个有效的例子http://jsfiddle.net/Qexhh/

Answer 2

如果我没记错，IE6处理div高度的方法有一个错误。当高度设置为100％时，它只会将div创建为包含其中内容所需的高度。我建议采用两种方法：

不要担心支持IE6，因为它无论如何都是一个死的浏览器
如果这不起作用，请使用类似jQuery的内容来获取父div的高度，然后将子div设置为该高度。
通过将背景设置为相同颜色来伪造它，因此没有人注意到差异

Answer 3

您可以通过设置孩子的top和bottom属性来实现此目的。

See how this is done

在该文章的底部，有一个指向Dean Edwards的IE7（和IE8）js库的链接，您应该为IE6访问者添加该库。它是一个JS库，实际上当你包含它时，IE5的行为就像IE7（或8）。甜！

Dean Edwars' IE7 and 8 JS libraries

Answer 4

据我所知，没有办法在绝对定位的子元素周围展开父元素。通过使子元素绝对定位，您将从常规页面项目流中删除它。

我最近建立了一个2列网站，其中右栏绝对定位，但左栏不是。如果左列的内容较少且高度小于右列，则页面会切断右列，因为它位于绝对位置。

为了解决这个问题，我必须确定右列的高度是否大于左列的高度，如果是这样，则将父div高度的高度设置为两者中的较大者。

这是我的jQuery解决方案。我不是一个编码器，所以随意调整一下：

jQuery(function(){  

     var rightColHeight = jQuery('div.right_column').height();  
     var leftColHeight = jQuery('div.left_column').height();

     if (rightColHeight > leftColHeight){  
     jQuery('.content_wrap').height(rightColHeight+'px');  
 }  
});

绝对定位的子div扩展到适合父母？

4 个答案: