使用瀏覽器滾動條滾動固定div內容

我有2個div與我的網頁上的固定位置，我想滾動瀏覽器滾動條上下第二個div不是div滾動，有誰知道如何做到這一點？我希望這不是太混亂。使用瀏覽器滾動條滾動固定div內容

#firstDiv 
 
{ 
 
    position:fixed;width:70%;height:20%;background-color:red;  
 
} 
 
#secondDiv 
 
{ 
 
    top:20%;position:fixed;width:70%;background-color:blue;overflow-y:scroll;bottom:0px 
 
}

<html> 
 
<head> 
 
<title>somthing</title> 
 
</head> 
 
<body> 
 
<div> 
 
    <div id="firstDiv"> 
 
    </div> 
 
    <div id="secondDiv"> 
 
     <pre> 
 
\t \t some Text some Text some Text some Text some Text 
 
some Textsome Textsome Textsome Textsome Textsome Textsome 
 
some Textsome Textsome Textsome Textsome Textsome Textsome 
 

 

 
\t </pre> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

酒吧

來源

2015-08-03 AliM

的fixed特性使得兩者的div上下滾動已經與用戶。使用您當前的設置，您無法看到，因爲您的網頁上沒有滾動或向下滾動。

你可能想要做的只是製作第一個格fixed，另一個格爲static（標準值）。如果第二個div足夠高，瀏覽器將添加一個滾動條，允許您在第一個div保持原位時向上/向下滾動第二個div。

看看這個片段（一定要單擊「全頁面」在右上角）：

body { 
 
    margin:0; 
 
} 
 

 
#first { 
 
    position:fixed; 
 
    top:0; 
 
    width:100%; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
#second { 
 
    margin-top:100px; 
 
    width:100%; 
 
    height:1500px; 
 
    background-color:blue; 
 
}

<body> 
 
    <div id="first"> 
 
     First div 
 
    </div> 
 

 
    <div id="second"> 
 
     Some text more text even more text.<br /> 
 
     A new line here. More text.<br /> 
 
     Text text text text text text.<br /> 
 
     Text text text text text text.<br /> 
 
     Text text text text text text.<br /> 
 
     Text text text text text text.<br /> 
 
     Text text text text text text.<br /> 
 
     Text text text text text text.<br /> 
 
     Et cetera.<br /> 
 
    </div> 
 
</body>

來源

2015-08-03 11:05:07 FWDekker

使用瀏覽器滾動條滾動固定div內容

回答

相關問題