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;
}

BTW：我将宽度设置为99％而不是100％，因为它修复了有时会上升并导致水平滚动的另一个问题。另一种解决方法是使用left：0px;在小组讨论。

忽略页面大小计算的元素

1 个答案: