Comment voulez-vous faire un div clip de son contenu visible?

Par exemple comme dans l'image ci-dessous. Vous avez le contenu couvrant l'ensemble de la page, mais vous voulez que le div "fenêtre" pour ne montrent qu'une partie de celui-ci? J'ai essayé de faire deux divisions, l'une intérieure et une extérieure.

L'intérieur avait en position fixe (donc basé sur le navigateur) et couvrant l'ensemble de la page, tandis que l'extérieur est absolue et placé à l'endroit où le rectangle rouge est. Ensuite, j'ai placé l'intérieur (avec le contenu de la page) dans la div extérieure, mais ne fonctionne pas à tous les

J'ai aussi essayé de jouer avec la négative rembourrage, mais qui n'est pas autorisé

recadrée div exemple

InformationsquelleAutor user1561753 | 2012-07-30
  1. 10

    Utilisation overflow, overflow-y, ou overflow-x style avec un width ou height.

    Si vous voulez tout simplement cacher grand contenu, de l'utilisation overflow:hidden. Si vous souhaitez également afficher la barre de défilement, utilisez overflow:scroll.

    Utilisation overflow-x pour masquer un contenu dont la largeur dépasse la largeur du conteneur. Utilisation overflow-y pour masquer un contenu dont la hauteur dépasse la hauteur du conteneur. Utilisation overflow pour masquer un contenu dont la largeur & hauteur dépasse la largeur du conteneur & hauteur.

    <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>
    InformationsquelleAutor Jay
  2. 2
    .panel {
    width:300px;
    height:400px;
    overflow:auto;
}

    overflow:auto affichera une barre de défilement lorsque cela est nécessaire, mais pas moins que son nécessaire.

    InformationsquelleAutor greg
  3. 0

    Que faire si vous avez essayé de créer un transparent div flotter au-dessus du contenu de la page?

    Puisque vous ne pouvez pas spécifier une marge de rembourrage et de la couleur, vous aurez besoin d'avoir 5 divs: en haut, à gauche, au centre, à droite, en bas. Ces couvrirait 100%, et le centre devrait être transparente. Les autres seraient un solide de couleur de fond, ou semi-transparent comme dans votre exemple. Avoir un centre transparent div signifie probablement que vous ne pouvez pas cliquer sur le contenu en dessous. Vous pourriez ne pas avoir de centre de div à la place.

    InformationsquelleAutor paddy