W jaki sposób utworzyć klip div z widoczną zawartością?

Na przykład jak na poniższym obrazku. Masz treść obejmującą całą stronę, ale chcesz, żeby "okno" div wyświetlało tylko jej część? Próbowałem zrobić dwa divy, jeden wewnętrzny i jeden zewnętrzny.W jaki sposób utworzyć klip div z widoczną zawartością?

Strona wewnętrzna miała ustaloną pozycję (w oparciu o przeglądarkę) i obejmowała całą stronę, podczas gdy zewnętrzna była absolutna i znajdowała się tam, gdzie znajduje się czerwony prostokąt. Następnie umieszcza się wewnętrzną (z zawartością strony) w zewnętrznej div, ale nie działa w ogóle

Próbowałem też niepożądanym ujemnym wyściółki, ale to nie jest dozwolone

cropped div example

Źródło

2012-07-30 user1561753

Zastosowanie overflow, overflow-y lub overflow-x styl z określonym width lub height.

Jeśli chcesz po prostu ukryć dużą zawartość, użyj overflow:hidden. Jeśli chcesz również pokazać pasek przewijania, użyj overflow:scroll.

Użyj overflow-x, aby ukryć zawartość, której szerokość przekracza szerokość kontenera. Użyj opcji overflow-y, aby ukryć zawartość, której wysokość przekracza wysokość kontenera. Użyj opcji overflow, aby ukryć zawartość o szerokości przekraczającej szerokość kontenera o wysokości &.

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

Źródło

2012-07-30 10:18:49 Jay

Co jeśli próbowałeś utworzyć przezroczysty element div, aby unosił się nad zawartością strony?

Ponieważ nie można określić marginesu lub koloru wypełnienia, potrzebne są 5 elementów div: góra, lewe centrum, prawo, dół. Obejmowałoby to 100%, a środek byłby przezroczysty. Pozostałe będą miały jednolity kolor tła lub półprzezroczyste, jak w twoim przykładzie. Posiadanie przezroczystego środka div prawdopodobnie oznaczałoby, że nie można klikać treści znajdujących się pod nim. Zamiast tego możesz nie mieć centrum div.

Źródło

2012-07-30 02:19:19 paddy

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

overflow: auto pojawi się pasek przewijania, gdy jest to konieczne, ale nie, chyba że jest to konieczne.

Źródło

2014-05-14 16:53:00 greg

W jaki sposób utworzyć klip div z widoczną zawartością?

Odpowiedz

Powiązane problemy