忽略元素进行页面大小计算

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"使用第二个绝对定位层，让"container"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;
}

BTW:我将宽度设置为99%而不是100%，因为它解决了另一个问题，有时会上升并导致水平滚动。另一种解决方法是使用left: 0px;