Question

例如如下图所示。你有内容跨越整个页面，但你想div“窗口”只显示它的一部分？我尝试制作两个div，一个是内部，另一个是外部。

内部已将其位置固定（因此基于浏览器）并跨越整个页面，而外部是绝对的并且位于红色矩形所在的位置。然后我将内部（带有页面内容）放在外部div中，但根本不起作用

我也尝试过使用负填充，但这是不允许的

Answer 1

将overflow，overflow-y或overflow-x样式与特定width或height一起使用。

如果您只想隐藏大型内容，请使用overflow:hidden。如果您还想显示滚动条，请使用overflow:scroll。

使用overflow-x隐藏宽度超过容器宽度的内容。使用overflow-y隐藏高度超过容器高度的内容。使用overflow隐藏宽度和宽度为1的内容高度超过容器宽度＆amp;高度。

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

Answer 2

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

overflow:auto会在必要时显示滚动条，但除非必要，否则会显示。

Answer 3

如果您尝试创建透明div以浮动页面内容，该怎么办？

由于您无法指定边距或填充颜色，因此您需要有5个div：top，left center，right，bottom。这些将跨越100％，中心将是透明的。其他的将是纯色背景颜色，或者在您的示例中是半透明的。拥有透明的中心div可能意味着您无法点击其下方的内容。你可能想要没有中心div。

你如何使div剪辑成为可见内容？

3 个答案: