绝对定位的子 div 扩展以适应父级？答案

【问题标题】：Absolute positioned child div expands to fit the parent?绝对定位的子 div 扩展以适应父级？
【发布时间】：2010-11-16 18:45:34
【问题描述】：

无论如何，绝对定位的子级是否可以扩展以填充其相对定位的父级？（父母的身高不固定）这是我所做的，它适用于 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 }

【问题讨论】：

标签： css internet-explorer-6

【解决方案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/

【讨论】：

【解决方案2】：

如果我没记错的话，IE6 处理 div 高度的方式存在一个错误。当高度设置为 100% 时，它只会将 div 创建到包含其中内容所需的高度。我会推荐两种方法：

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

【讨论】：

+1 表示第一个项目。太棒了！ IE6 已经快九岁了。埋了！！

【解决方案3】：

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

See how this is done

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

Dean Edwars' IE7 and 8 JS libraries

【讨论】：

【解决方案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');  
 }  
});

【讨论】：