html - 为什么边际最高百分比使用高度，我该如何解决？

我有一个CSS下拉菜单，可以在显示的元素数量上有所不同。
我使用overflow: hidden包装器和margin-top: -100%隐藏菜单，使用margin-top: 0的CSS转换设置幻灯片的动画。
问题似乎是margin-top: -100%似乎获取了任何父元素的显式width，而忽略了内容高度。

.outer {
  overflow: hidden;
  border: 10px solid red;
  cursor: pointer;
}
.outer > .slide {
  margin-top: -100%;
  transition-property: margin-top;
  transition-duration: 1s;
}
.outer:hover > .slide {
  margin-top: 0;
}
.outer.bug {
  width: 100px;
}

<div class="outer">
  <div class="slide">
    <ul>
      <li>
        Ayy
      </li>
      <li>
        Bee
      </li>
      <li>
        See
      </li>
      <li>
        Dee
      </li>
      <li>
        Eee
      </li>
      <li>
        Eff
      </li>
      <li>
        Gee
      </li>
    </ul>
  </div>
</div>

<div class="outer bug">
  <div class="slide">
    <ul>
      <li>
        Ayy
      </li>
      <li>
        Bee
      </li>
      <li>
        See
      </li>
      <li>
        Dee
      </li>
      <li>
        Eee
      </li>
      <li>
        Eff
      </li>
      <li>
        Gee
      </li>
    </ul>
  </div>
</div>

运行这个代码片段，您应该会看到两个红色框，鼠标悬停在其中一个框上，以获得向下滑动菜单。
问题是第二个框-唯一的区别是父对象设置了width: 100px;。
如果您检查第二个框，您应该会看到margin-top: -100%;被计算为-100px。
事实上，对父div的任何显式或继承宽度都将成为负边距。
我找到的唯一办法是显式地将margin-top设置为与滑动菜单的高度相同，但这涉及到DOM布局和JS，我并不想为每个菜单都这样做。
这是一个错误，在浏览器如何处理负百分比利润率顶部？IE11、Chrome和FX似乎都是这样对待的。
有没有更好的方法不需要显式的高度计算和额外的Javascript呢？

最佳答案

要相对于元素自身的维度移动元素（无论其高度如何），可以使用transform:translate()而不是边距。
因此，你需要用它自己的高度来移动这个元素，需要在-Y轴100%中进行平移。就像这样：

* {
  margin: 0;
  padding: 0;
}
.outer {
  /* overflow: hidden; */
  padding: 10px;
  background: red;
  cursor: pointer;
  position: relative;
}
.outer > .slide {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 1s;
}
.outer:hover > .slide {
  transform: translateY(0%);
}

<div class="outer">
  <div class="slide">
    <ul>
      <li>Ayy</li>
      <li>Bee</li>
      <li>See</li>
      <li>Dee</li>
      <li>Eee</li>
    </ul>
  </div>
</div>

然后我们可以使用绝对定位从文档流中移除子级。

关于html - 为什么边际最高百分比使用高度，我该如何解决？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40174788/