为什么边距顶部百分比使用高度以及如何解决它

Question

我有一个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？

Answer 1

要相对于元素自身的尺寸移动元素(无论其高度如何(，您可以使用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>

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

Answer 2

只有当我们删除20px分配.outer的边框时才margin-top:-100%工作，该边框10px + 10px使用了两次。因此，我们可以在这里使用 CSS calc(( 函数来获取我们的输出。

ul有一个默认padding-top:40px所以这也被使用了两次 40px + 40px ，我们必须将其设置为 0px .

所以ul和边界是margin-top:-100%;不起作用的原因

默认 ul 属性 ：

ul{
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}

.outer {
  overflow: hidden;
  border: 10px solid red;
  cursor: pointer;
  width:auto;
  height:auto;
}
.outer > .slide {
  margin-top: calc(-26px + (-100%));
  transition-property: margin-top;
  transition-duration: 1s;
  background:#ccc;
}
.outer > .slide > ul{
  padding:0;
  margin:0;
}
.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>