Question

我如何将孩子绝对定位到父母的右侧（在子元素的所有边上都有边距）？当孩子超出文档的正常流量时，为什么孩子会导致父（带有min-height）生成滚动条？我该怎么做才能摆脱滚动条？

或者，我如何在孩子的相对位置的上下文中使用calc（）函数，以便得到相同的结果？

＆＃13;

* {
  box-sizing: border-box;
}
.box {
  width: 50%;
  min-height: 400px;
  margin: 50px auto;
  background: hsl(220, 80%, 50%);
  overflow: auto;
  position: relative;
}
.child {
  width: 200px;
  margin: 20px;
  min-height: inherit;
  background: firebrick;
  position: absolute;
  right: 0;
}

＆＃13;

<div class="box">
  <div class="child"></div>
</div>

＆＃13;

Answer 1

子级上的min-height: inherit;从父级继承400px的值，margin: 20px;使总高度超过100％，并且您有overflow: auto;次设置在那里，这意味着如果容器无法容纳内容，则会出现滚动条。

如果它们处于正常内容流程中，则滚动条不会显示，因为它是min-height，容器将调整高度以适合内容。但是，在relative和absolute位置，绝对框被取出正常流量，容器将无法调整高度以自动适应，这将导致孩子的溢出身高超过。

要摆脱滚动条，您可以像使用的那样使用calc()功能。您只需要在孩子身上设置min-height: calc(100% - 40px);即可。或者，在父级上将overflow值更改为hidden，但输出会有所不同。

顺便说一句，因为您声明了box-sizing: border-box;，但它对margin没有任何作用。

用绝对孩子定位亲戚

1 个答案: