忽略页面大小计算的元素答案

【问题标题】：ignore element for page size calculation忽略页面大小计算的元素
【发布时间】：2013-04-20 01:32:52
【问题描述】：

如何强制浏览器不根据某些绝对定位元素计算内容的大小？我正在寻找类似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;
}

【问题讨论】：

标签： css transform css-transitions

【解决方案1】：

这可能与您正在寻找的内容不完全匹配，但也许可以提供一些想法。

如果您可以更改 html 代码，则可以通过使用第二个绝对定位层来使用“溢出：隐藏”，并让“容器”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%，因为它解决了另一个有时会上升并导致水平滚动的问题。解决这个问题的另一种方法是使用 left: 0px;在面板上。

【讨论】：