固定元素的子元素的大小調整不正確

我有一些嵌套的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

固定元素的子元素的大小調整不正確

回答

相關問題