Question

我发现一些（我认为）是相当奇怪的行为。拿这个代码：

private TextArea getTextAreaFor(Tab tab) {
  return (TextArea)tab.getContent(); // with checks etc...
}

我没有长时间进行网络开发，但我认为第一个<body style="background-color:#1b1b1b"> <div style="width:100%;height:1px;background-color:#f00" /><br /> <div style="width:1300px;height:300px;background-color:#fff;margin: 0 auto;" /> </body>始终是页面的整个宽度，无论我对浏览器做了多少重新调整窗口。但是，当我重新调整浏览器窗口的宽度以使其小于较低div（div）的宽度并滚动时，应该是1300px的{{1}} {1}}似乎被切断了。我记录了这种行为：

http://i.imgur.com/5bFIj0O.gifv （抱歉没有嵌入，似乎这里不支持div文件格式。）

对这个问题的任何建议（我认为这可能要简单得多）？

Answer 1

宽度为100％的div将是包含元素的100％，即body。默认情况下，body的宽度将与视口的宽度匹配。因此，body只有你的视口宽，然后宽度为100％的div将是相同的宽度，宽度为1300px的内部div会溢出这两个宽度。这就是红线在视口宽度处切断的原因。如果你将overflow：hidden添加到body或宽度为100％的div中，你将看不到1300px宽div的溢出。

如果您想要横向滚动，可以使用overflow-x: scroll;

将width: 100%;添加到div中

<body style="background-color:#1b1b1b">
  <div style="width:100%;border-top: 1px solid #f00;padding-top: 1em; overflow-x: scroll;">
    <div style="width:1300px;height:300px;background-color:#fff;margin:auto;">foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo </div>
  </div>
</body>

为什么我的一些div元素被水平切断了？

1 个答案: