忽略页面大小计算的元素

Question

如何强制浏览器不计算基于某些绝对定位元素的内容大小？ 我在寻找类似https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing

对于一个简单的使用情况，请查阅http://jsfiddle.net/edzis/5nnYk/

html, body, .container { 
    /** 
     https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing 
     DOES NOT WORK 
    **/ 
    -moz-stack-sizing: ignore; 
    -webkit-stack-sizing: ignore; 
    stack-sizing: ignore; 
} 

Answer 1

这可能不是完全匹配您正在寻找的东西，但也许可以提出一些想法。

如果您可以更改html代码，您可以使用第二个绝对定位图层来使用“overflow：hidden”，并让“容器”div只负责您希望滚动的尺寸。

注意：如果初始窗口宽度较小且容器导致滚动，屏幕上的元素可能无法呈现并需要刷新，这里可能存在问题。

这里有一个更新的jsfiddle链路：http://jsfiddle.net/5nnYk/24/

代码例如：

<div class="panel"> 
    <div class='left'>LEFT</div> 
    <div class='right'>RIGHT</div> 
</div> 
<div class='container'> 
</div> 

然后设置面板类：

.panel{ 
    width:99%; 
    height:200px; 
    position:absolute; 
    z-index:1; 
    overflow:hidden; 
    -webkit-transform-style: preserve-3d; 
} 

顺便说一句：我设置宽度至99％，而不是100因为它修复了另一个有时会上升并导致水平滚动的问题。解决这个问题的另一种方法是use left：0px;在面板上。