1

我有一些嵌套的 div 在 Chrome 26（稳定版）中无法正确调整窗口的大小，但它们在以前的版本和 Firefox 中都可以正常工作。在我提交错误报告之前，我想确保我所看到的不是我的其他浏览器无法正常运行的预期标准行为。

使用 Chrome 26，尝试在此 Plunkr上调整预览窗格的大小。该#inner元素将缩小或扩展超出其父级的范围，我不希望它这样做，并且在以前版本的 Chrome 或 Firefox 中它不会这样做。

将我的#outerdiv 设置为绝对定位可以解决问题——除了我需要将#outerdiv 固定到位。我还注意到删除position:absolutefrom#main也可以解决问题……但我需要#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>
4

1 回答 1

0

如果您将主容器更改position:fixed为如下所示，它将解决调整大小的问题。不知道这会对页面布局产生什么影响，但它是一个类似的外观。

#main 
{
    position:fixed;
    top:0;bottom:0;left:0;right:0;
    background-color:#d3fcee;
}
于 2013-05-16T20:03:00.503 回答