最小 - 高度与儿童设置为：绝对

我有一个小孩div设置为相对于其父母的绝对位置的容器div。容器div具有最小高度集合，但是当子div的高度在父级高度上扩展时，父级操作会拉伸。这是由于孩子的绝对定位。是否有任何想法如何，我可以让家长与孩子伸展，其高度的增加最小 - 高度与儿童设置为：绝对

#parent{ 
position:relative; 
min-height:200px; 
width:200px; 
} 

#child{ 
    position:absolute; 
    top:0; 
    left:0; 
    min-height:150px; 
} 

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

来源

2011-04-27 Richard Banks

为什么你需要绝对定位子元素？这似乎是不必要的。 – LostLin 2011-04-27 20:52:37

你知道父div的高度吗？还是随着时间的推移而变化？ – 2011-04-27 20:52:49

@ima学生原因是我需要并排设置2个子div。我会使用浮动，但我需要设置zindex。你只能这样做，如果该元素有绝对或相对的位置 – 2011-04-27 22:27:42

你所想要实现纯不可能，只是一个简单的事实是，当你添加一个绝对的规则的元素，你隐式地将它从正常的布局上下文中取出。在一个相对的父容器中只意味着它有一个定义的盒子，它将包含它并设置该元素的默认x和y坐标，默认情况下它是窗口，这就是为什么当相对位置没有分配给父绝对定位元素将相对于浏览器窗口的左上角。

现在，替代方法可以是使用隐藏在父级中的溢出，并为剩余内容使用滚动条。查看jsfiddle我的例子：

#parent{ 
 
position:relative; 
 
min-height:200px; 
 
width:200px; 
 
border: 1px solid #ccc; 
 
overflow-y: scroll; 
 
} 
 

 
#child{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    min-height:150px; 
 
}

<div id="parent"> 
 
<div id="child"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci sit amet eros hendrerit tristique. Mauris non felis purus, sit amet molestie dolor. Quisque iaculis ante ac massa suscipit fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel lectus urna, vel condimentum felis. In vel justo lorem, vel vulputate tortor. Morbi hendrerit erat at ipsum tempus ut sollicitudin nisi consectetur. Suspendisse potenti. Donec varius orci at mi consequat porttitor. Integer vestibulum convallis ultricies. Mauris imperdiet mauris nec nunc fringilla varius. Nunc molestie tempus mi, quis congue libero iaculis eget. Vestibulum a odio nisl. Mauris mollis consequat est, id porttitor metus semper sed. Sed magna lacus, pulvinar vel laoreet vel, dignissim at sem. Aliquam erat volutpat. Donec sit amet nibh sit amet arcu hendrerit facilisis. Nunc euismod, sapien eget fermentum sagittis, tortor felis varius velit, non tincidunt sapien diam in augue.</p> 
 
    </div> 
 
</div>

来源

2011-04-27 21:15:45 forthehackofit

啊好的。说实话，我不认为这是可能的，但认为有人可能会以不同的方式告诉我。感谢你的回答 – 2011-04-27 23:33:13

我不认为你可以做你的要求。您可以设置body, html: { height: 100%; }，然后将您的父分区更改为height: 100%;，这将有效地执行您想要的操作。但是如果没有其他HTML标记的知识，很难在这里提供一个明智的答案。

来源

2011-04-27 21:23:02

最小 - 高度与儿童设置为：绝对

回答

相关问题