在容器内的另一个 div 下方显示具有动态高度的 div？

Posted 2023-03-06

【中文标题】在容器内的另一个 div 下方显示具有动态高度的 div？

【英文标题】：Reveal a div with dynamic height underneath another div inside a container?

【发布时间】：2019-03-14 16:52:39

【问题描述】：

所以，我有一个包含标题和描述的内容框，它们位于 div 的底部。最初，描述是隐藏的。我想要做的是，当您将鼠标悬停在 div 上时，标题应该向上移动并显示具有动态高度的描述。

这是我现在拥有的：https://codepen.io/tayanderson/pen/qJrmXE

问题是，如果描述是 1 行或 3 行，它将无法正确显示。标题 div 应根据描述 div 的大小向上移动。

Here's an example of what I'm trying to do

html

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">Title</div>
  <div class="desc">Lorem ipsum dolor sit amet, consectetur</div>
</div>

CSS

.grid-item 
  height:300px;
  background-size: cover;
  width:300px;
  position: relative;
  overflow: hidden;
  color: #fff;

  .title 
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     padding: 0 20px;
  

  .desc 
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    padding: 5px 20px;
 

  &:hover .title 
    bottom: 30%;
 
  &:hover .desc 
    transform: translateY(0%);
 

【问题讨论】：

似乎有 3 个人回答了这个问题，并且所有 3 个人的回答都以您认为对您的情况没有帮助的方式回答。在这些类型的情况下，这可能意味着需要使规范更加清晰。下次，请澄清您要做什么并对答案发表评论，以便改进它们，而不是在不发表评论的情况下对每个人的答案投反对票。

你说得对，我的问题并不清楚。我试图编辑以使其更清晰。我没有对任何人投反对票...

抱歉，请忽略我之前的评论，因为它是针对投反对票的人

【参考方案1】：

这就是你的意思？

.inner, .inner:hover .grid-item.inner 
  -webkit-transition:all linear 0.2s;
  transition:all linear 0.2s;


.inner 
  background: #afa;
  width: 300px;
  overflow: hidden;
  position: absolute;


.grid-item:hover .inner
  margin-top: -100px;

<a class="grid-item" href=" .Permalink " style="background-image: url(images/recipes/.Params.image)">
    <div class="inner"><h3 class="title is-3">.Title</h3></div>
    <div class="content"><p class="grid-item-blurb">.Description</p></div>     
</a>

【参考方案2】：

请注意，我颠倒了内部元素的顺序。

.body 
  background: #aaf;
  height: 100px;
  width: 300px;
  overflow: hidden;


.inner, .content 
  transition: all linear 0.2s;


.content 
  height: 100%;


.inner 
  background: #afa;
  transform: translateY(100%);
  top: 100%;


.body:hover .inner,
.body:hover .content 
  transform: translateY(-100%);

<div class="body">
  <div class="content">
    Blue is a viewport (&lt;body&gt;, visible part of a page), which content should be compressed upon green slide-in
  </div>
  <div class="inner">Green is variable-height text which slides in on viewport hover</div>
</div>

【讨论】：

嗯，我的意思是绿色框中的内容应该向上移动而不隐藏蓝色框中的内容。这有意义吗？

是的，这就是我首先构建的。然后我重新阅读了“push up”并进行了重构。不确定我是否有时间根据您的修订来重做。当人们试图提供帮助时，似乎不适合投反对票。

对不起，我没有问一个明确的问题。不过感谢您的帮助。另外，我没有对你或其他任何人投反对票