如何讓div剪輯其可見內容？

比如像下面的圖片。你有內容跨越整個頁面，但你想div「窗口」只顯示它的一部分？我嘗試製作兩個div，一個是內部，一個是外部。如何讓div剪輯其可見內容？

內部的位置是固定的（所以基於瀏覽器），跨越整個頁面，而外部是絕對的，位於紅色矩形的位置。然後我把內（與頁面內容）外格，但在沒有工作的所有

我也試圖與負填充搞亂，但是這是不允許的

cropped div example

來源

2012-07-30 user1561753

使用overflow,overflow-y或overflow-x款式與特定的width或height。

如果您想簡單地隱藏較大的內容，請使用overflow:hidden。如果您還想顯示滾動條，請使用overflow:scroll。

使用overflow-x來隱藏寬度超過容器寬度的內容。使用overflow-y隱藏高度超過容器高度的內容。使用overflow來隱藏其高度超過容器寬度&高度的內容。

<HTML> 
    <BODY> 
    <DIV STYLE="width:20ex; overflow-x:scroll; border:1px solid black;"> 
     <NOBR>very long text very long text very long text very long text very long text</NOBR> 
    </DIV> 
    <BR /> 
    <DIV STYLE="height:3em; overflow-y:scroll; border:1px solid black;"> 
     line 1<BR /> 
     line 2<BR /> 
     line 3<BR /> 
     line 4<BR /> 
     line 5<BR /> 
     line 6 
    </DIV> 
    <BR /> 
    <DIV STYLE="width:20ex; height:3em; overflow:scroll; border:1px solid black;"> 
     <NOBR>very long text very long text very long text very long text very long text</NOBR> 
     line 1<BR /> 
     line 2<BR /> 
     line 3<BR /> 
     line 4<BR /> 
     line 5<BR /> 
     line 6 
    </DIV> 
    <BR /> 
    <DIV STYLE="width:20ex; height:3em; overflow:hidden; border:1px solid black;"> 
     <NOBR>very long text very long text very long text very long text very long text</NOBR> 
     line 1<BR /> 
     line 2<BR /> 
     line 3<BR /> 
     line 4<BR /> 
     line 5<BR /> 
     line 6 
    </DIV> 
    </BODY> 
</HTML>

來源

2012-07-30 10:18:49 Jay

如果什麼你嘗試創建一個透明的div來浮動頁面內容？

既然你不能指定一個邊距或填充顏色，你需要有5個div：top，left center，right，bottom。這些將跨越100％，而中心將是透明的。其他的將是一個堅實的背景顏色，或者像你的例子那樣是半透明的。有一個透明的中心div可能意味着你不能點擊它下面的內容。你可能想要沒有中心的div。

來源

2012-07-30 02:19:19 paddy

.panel { 
      width:300px; 
      height:400px; 
      overflow:auto; 
     }

溢出：自動將顯示滾動條時，它是必要的，但不是除非它的必要。

來源

2014-05-14 16:53:00 greg

如何讓div剪輯其可見內容？

回答

相關問題