绝对定位的子元素div会扩展到适应父元素吗？

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 }

- Amon

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/

- Joshua Robison

Answer 2

如果我没记错的话，IE6在处理div高度时存在一个bug。当高度设置为100%时，它只会创建足以容纳其中内容的div高度。我建议采取以下两种方法：

1. 不要担心支持IE6，因为它已经是一个过时的浏览器了
2. 如果第一种方法行不通，可以使用类似jQuery的工具获取父div的高度，然后将子div的高度设置为相同的高度。
3. 通过将背景颜色设置为相同的颜色来模拟，这样就不会有人注意到差异了。

- Chris Johnston

---

给第一项点个赞（+1）。太棒了（Bravo）！IE6已经快九年了，把它淘汰吧！！ - jathanism

Answer 3

据我所知，没有办法扩展一个绝对定位的子元素周围的父元素。 如果使子元素绝对定位，则会将其从页面项目的常规流中删除。

我最近建立了一个两列网站，其中右列是绝对定位的，而左列不是。 如果左列的内容比右列少且高度较小，则页面将截断右列，因为它是绝对定位的。

为了解决这个问题，我必须确定右列的高度是否大于左列的高度，如果是，则将父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');  
 }  
});

- ScottG

Answer 4

你可以通过设置子元素的顶部和底部属性来实现这一点。

看看如何实现

在那篇文章的底部，有一个链接指向Dean Edwards的IE7（和IE8）js库，你应该为IE6访问者包含它。这是一个JS库，当你包含它时，它实际上使IE6的行为像IE7（或8）。太棒了！

Dean Edwars' IE7和8 JS库

- kmiyashiro