2012-07-30 9 views
6

たとえば、次の画像のようになります。ページ全体にコンテンツがありますが、divの「ウィンドウ」にその一部だけを表示したいのですか?私は内側と外側の2つのdivを作ってみました。divクリップをどのように表示するのですか?

インナーは固定されていたので(ブラウザーに基づいて)、ページ全体に広がっていて、アウターは絶対的で赤い四角形の位置に配置されていました。私はその後、私はまた、負のパディングをいじってみましたが、それは

cropped div example

答えて

9

具体的なwidthまたはheightを持つoverflow,overflow-y、またはoverflow-xスタイルを使用してください。

大きなコンテンツを単純に非表示にする場合は、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> 
0

どうかの許可されていない外側のdivに(ページのコンテンツとの)内部に配置されただけで、すべての

で動作しませんでした透明なdivを作成してページの内容を浮かべてみましたか?

マージンやパディングカラーを指定することはできませんので、5つのdiv:top、left center、right、bottomが必要です。これらは100%に及んで、中心は透明なものになります。あなたの例のように、他のものは堅実な背景色、または半透明になります。透明な中心divを持つと、その下のコンテンツをクリックできない可能性があります。代わりに中央のdivを使用することもできます。

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

オーバーフロー:自動車は、それが必要なときにスクロールバーを表示しますが、しない限り、その必要はありません。