固定元素的子元素的大小调整不正确

我有一些嵌套的div在Chrome 26（stable）中没有正确调整窗口的大小，但在以前的版本和Firefox中都可以正常工作。在我提交bug报告之前，我想确保我所看到的并不是我的其他浏览器只是不正确的标准行为。固定元素的子元素的大小调整不正确

使用Chrome 26，请尝试在this Plunkr上调整预览窗格的大小。 #inner元素将缩小或扩展到其父级的边界之外，我不希望它这样做，以及它在以前版本的Chrome或Firefox中无法实现的边界。

将我的#outer div设置为绝对定位修复了问题 - 除了我需要固定的#outer div。我也注意到，从#main中删除position:absolute也解决了这个问题......但我需要#main才能完全定位。

我不知道为什么会发生这种情况，或者即使这是预期的行为。我需要#inner孩子调整其#outer父母，没有#outer元素独立缩放。我怎样才能做到这一点？

HTML/CSS

<!doctype html> 
<html> 
<style> 
#main { 
    min-height: 100%; 
    position: absolute; 
    width: 100%; 
} 
#container { 
    min-width: 400px; 
    width: 50%; 
    margin: auto; 
    position: relative; 
} 
#outer { 
    position: fixed; 
    border: solid 2px black; 
    margin-top: 100px; 
    top: auto; 
    max-height: 150px; 
    position: fixed; 
    width: 50%; 
    min-width: 400px; 
    margin: auto; 
    background-color: green; 
} 

#inner { 
    background-color: rgba(0,0,0,.5); 
    padding: 10px; 
    border: 2px gray dashed; 
    position: relative; 
} 

</style> 
<div id="main"> 
<div id="container"> 
    <div id="outer"> 
     <div id="inner"> 
      <input type="text"> 
     </div> 
    </div> 
</div> 
</div>

来源

2013-04-30 Ian Hunter

如果更改，如下所示position:fixed主容器，它会解决这个问题，调整大小。不知道对页面布局会产生什么影响，但它看起来很相似。

#main 
{ 
    position:fixed; 
    top:0;bottom:0;left:0;right:0; 
    background-color:#d3fcee; 
}

来源

2013-05-16 20:03:00 jim31415

固定元素的子元素的大小调整不正确

回答

相关问题