棘手的CSS滾動長度

Question

<div class="container1"></div> 
<div class="container2"><div class="container2-inner"></div></div> 

.container1 { height: 5000px; } 
.container2 { height: 100%; width: 100%; position:absolute; } 
.container2-inner { height: 1000px; margin: 0 auto; } 

.container2-inner高度根據裏面的內容而變化（.container2是覆蓋彈出窗口）。

如果.container2-inner超過5000像素，目前縱向瀏覽器滾動總是5000px，不管怎樣或更多。當彈出窗口處於活動狀態時，我想滾動爲只有1000px，但我仍然希望保持5000px的高度.container1以下。我如何實現這一目標？

Answer 1

不知道，我不是理解你的問題，根據您的描述，但也許像...

CSS

HTML, BODY {padding:0;margin:0;} 
.container1 {height:5000px;background:red;} 
.container2 {height:100%;width:100%;position:absolute;top:0;left:0;background:green} 
.container2-inner {height:1000px;width:400px;overflow-x:hidden;overflow-y:scroll; margin:0 auto;background:yellow} 

HTML

<div class="container1"></div> 
<div class="container2"> 
    <div class="container2-inner"> 
    Start Here<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    ...<br />...<br />...<br />...<br />...<br />...<br /> 
    End Here 
    </div> 
</div> 

您可以在http://dabblet.com/gist/2876726

看到的結果

Answer 2

聽起來像你想.container2是一個模式彈出？ 嘗試在身體上設置overflow:hidden，當彈出窗口處於活動狀態時，並在關閉時將其刪除。

Answer 3

我不知道我是否正確理解您的問題。

您可以通過使用實現模態的內滾動。

overflow:scroll 

但它不適用於所有瀏覽器。

我發現這個fiddle在其他Stack Overflow Question可能會幫助你。

<div id="wrapper"> 
    <div id="scroller"> 
    </div> 
</div>​ 

#wrapper { 
    width: 150px; 
    overflow: hidden; 
} 

#scroller { 
    width: 170px; 
    height: 100px; 
    overflow: auto; 
} 

謝謝Pumbaa80。 在這裏，您可以看到#scroller 20px超過#wrapper，您可以在不使用滾動條的情況下實現滾動效果。