Question

考虑这个文件：

<div id="container" class="no-panel">
  <div id="panel">
    <!-- Can be any DOM with arbitrary, variable height. 
         120px is hardcoded only for the demo. -->
    <div style="height: 120px">Some Contents</div>
  </div>
  <div id="contents">
    <!-- Can be any DOM with arbitrary, variable height. 
         300px is hardcoded only for the demo. -->
    <div style="height: 300px">Some Contents</div>
  </div>
</div>

#panel和#contents都应该与其内容一样高，而不是更多（在示例中，我使用任意子div强制他们的身高 - 只是为了演示）。

我想将一个类应用于#container，使#panel一直向上滑动（因此它在视口的顶部边框后面变得不可见）。与此同时，#contents应向上滑动#panel相同的金额。我也喜欢这样的动画（在演示中我使用了:hover而不是类）。

如何在不使用JS 的情况下？它必须在Chrome / Firefox中运行，但我不关心其他浏览器。

我尝试设置translateY(-100%)，这在#panel上工作正常，但#contents相对于其高度移动100%，而不是#panel身高，太过分了。

绝对定位不起作用，因为我需要修正{I}的高度，我试图不做（它的内容应该有所不同）。

JSFiddle with an example on how I'd like it to work. - 但是我不想要硬编码的值。

Answer 1

诀窍是将#contents放在#panel中，并使用position：absolute将它放在#panel div的下边缘。

<div id="container" class="no-panel">
  <div id="panel">
    <div>text</div>
    <div id="contents">
      <div>text</div>
    </div>
  </div>
</div>

#container {
  height: 100vh;
  overflow: hidden;
}

#panel:hover {
  transform: translateY(-100%);
}

#panel {
  background: orange;
  transition: 0.25s;
  position: relative;
}

#contents {
  background: brown;
  position: absolute;
  top: 100%;
}

working fiddle

编辑：@kalsowerus在评论中发布了一个类似但可能更好的方法，它不需要嵌套元素。

Answer 2

这里的主要问题是，当您使用transform移动内容时，文档流中的元素位置/大小实际上并未发生变化，只是元素视觉位置发生变化。

这种技术也是AFAIK唯一的一种，你可以将一个元素移动到自己的未知高度（或宽度），虽然因为它的兄弟姐妹不知道它是否移动，他们赢了＆＃39; t move。

这里有2个选项（基于CSS），您可以将container嵌套在panel内，而lee comstock在答案中建议，或者使用{{1} } trick，你在max-height上设置它的值高于你预期的值。

如果你可以嵌套它们，那将是最有效的解决方案，因为它将是完全动态的

＆＃13;

panel

＆＃13;

#container {
  width: 100%;
  height: 100%;
}
#panel, #contents {
  transition: max-height 0.2s ease-in;   /*  changed from "all" to "max-height"  */
}
#panel {
  background-color: tomato;
  width: 100%;
  height: auto;

  max-height: 200px;                     /*  added  */
  overflow: hidden;                      /*  added  */
}
#contents {
  background-color: crimson;
  width: 100%;
}
#container:hover #panel {
  max-height: 0;                         /*  changed property  */
}

* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
}

＆＃13;

Answer 3

从评论中的对话中，我想出了一个简单的方法（参见fiddle）。 CSS使用translate隐藏#panel和absolute相对于其父级#contents的{{1}}移动位置。

不幸的是这种方法会影响父母的身高。

注意，只有#container和#panel成为#contents的唯一子女，才有效。

＆＃13;

#container

＆＃13;

#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#panel, #contents {
  transition: all 0.2s ease-in;
}

#panel {
  background-color: tomato;
  width: 100%;
  height: auto; /* Has to be sized to fit its contents, and not more. */
}

#contents {
  position: absolute;
  top: 100%;
  background-color: crimson;
  width: 100%;
}

#container:hover #panel {
  transform: translateY(-100%);
}

#container:hover #contents {
     top: 0;
}

* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

＆＃13;

滑动元素100％向上和所有后续兄弟姐妹相同的数量？

3 个答案: