忽略頁面大小計算的元素

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;在面板上。