例えば下の画像のように。ページ全体にまたがるコンテンツがありますが、div「ウィンドウ」にその一部のみを表示したいですか? 内側と外側の 2 つの div を作成してみました。
内側の位置は固定されており (ブラウザーに基づいて)、ページ全体にまたがっていますが、外側の位置は絶対的で、赤い四角形の場所に配置されています。次に、内側(ページコンテンツを含む)を外側のdivに配置しましたが、まったく機能しませんでした
私も負のパディングをいじってみましたが、それは許可されていません
例えば下の画像のように。ページ全体にまたがるコンテンツがありますが、div「ウィンドウ」にその一部のみを表示したいですか? 内側と外側の 2 つの div を作成してみました。
内側の位置は固定されており (ブラウザーに基づいて)、ページ全体にまたがっていますが、外側の位置は絶対的で、赤い四角形の場所に配置されています。次に、内側(ページコンテンツを含む)を外側のdivに配置しましたが、まったく機能しませんでした
私も負のパディングをいじってみましたが、それは許可されていません
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>
.panel {
width:300px;
height:400px;
overflow:auto;
}
overflow:auto
必要な場合はスクロールバーを表示しますが、必要でない限り表示しません。
ページ コンテンツの上に浮かぶ透明な div を作成しようとした場合はどうなるでしょうか。
マージンまたはパディングの色を指定できないため、上、左中央、右、下の 5 つの div が必要です。これらは 100% にまたがり、中央が透明になります。他のものは、例のように無地の背景色、または半透明になります。透明な中央の div があるということは、おそらくその下のコンテンツをクリックできないことを意味します。代わりに、中央の div を持たない方がよい場合があります。