11

例如如下图所示。您的内容跨越整个页面，但您希望 div“窗口”只显示其中的一部分？我尝试制作两个 div，一个是内部的，一个是外部的。

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

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

裁剪的 div 示例

4

3 回答 3

17

使用overflow,overflow-y或overflow-x带有特定widthor的样式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>
于 2012-07-30T10:18:49.703 回答
2 
.panel {
    width:300px;
    height:400px;
    overflow:auto;
}

overflow:auto将在必要时显示滚动条，但除非必要时不显示。

于 2014-05-14T16:53:00.707 回答
0

如果您尝试创建一个透明的 div 以浮动在页面内容上怎么办？

由于您无法指定边距或填充颜色，因此您需要 5 个 div：顶部、左侧中心、右侧、底部。这些将跨越 100%，并且中心将是透明的。其他的将是纯色背景色，或如您的示例中的半透明色。拥有一个透明的中心 div 可能意味着你不能点击它下面的内容。您可能希望没有中心 div。

于 2012-07-30T02:19:19.527 回答