Question

我正试图找出溢出属性

因此，在使用margin:auto属性的元素中间，已定义了width，但是，
对元素相对于其容器/父对象垂直居中有什么要求？

在当前设置下会发生溢出，
何时溢出会自动扩展容器以适合溢出元素？

div {
  margin: 200px auto;
  height: 100%;
  width: 60%;
  border: 10px solid red;
  text-align: center;
}

body {
  height: 300px;
  min-height: 500px;
  padding: 0;
  border: 10px solid yellow;
  overflow: auto;
}

<div>
  somet text
</div>

Answer 1

关于当前代码的几件事：

如果您希望div是可滚动的，则应在div上放置自动溢出功能。将其放在顶层容器上将导致您永远看不到正确的滚动条。
每个div的左/右页边距为200px。这种保证金有理由吗？也许可以使用更结构化的布局来更好地解决此问题。例如表或浮动div。我认为当窗口开始调整大小时，您200px的边距可能会开始使事情看起来很奇怪。

不过，为了回答您的问题，我认为您可以使用新的flexbox显示选项轻松地执行所需的操作。这是一个示例：

body {
  padding: 0;
  border: 10px solid yellow;
  height: 300px;
  display: flex;
}

div {
  height: 60%;
  width: 60%;
  border: 1px solid red;
  text-align: center;
  overflow: auto;
  margin: auto;
}

<div>
  somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br>
</div>

CSS Overflow自动及其工作

1 个答案: