logo标签列表

Flexbox、绝对定位和100%高度

htmlcssflexbox
4

我在使用一个绝对定位的盒子内嵌套 Flexbox 时遇到了问题，这个盒子是包含在一个有固定高度的 div 中的（接下来我会详细解释）。

首先，我提供一个示例代码片段，以便更好地理解这个问题：https://jsfiddle.net/8ub9tyub/

可以看到，当鼠标悬停在块上时，文本会从下方出现，但并没有完全显示出来。

我有一个主 div（我们称之为$main），它用于悬停部分，大小为 600x250px，设置了 overflow: hidden 属性，在其中有两个 div：标题和文本（我们称之为 $title 和 $text），它们按照常规流一个接一个地出现。

$title 有时会占用两行，因此其高度设置为自动。 $text 的高度设置为 100%，相对定位，并设置为 display: flex。里面又包含另一个 div（我们称之为 $intro），我将其设置为绝对定位，top: 100%（在悬停时切换到 0），并设置 align-self: flex-end，以使其保持在 $main 的底部。（这是为了防止文本被卡在标题上 - 我希望它有空间呼吸）

基本上，结构如下：

<div class="main">
 <div class="title">I'm a title!</div>
 <div class="text">
  <div class="intro"><p>Just a bunch of long paragraphs of text</p></div>
 </div>
</div>

现在，正如您在我的演示中所看到的，$text 的高度设置为 100％，但我希望高度为 $main 减去 $title 的高度，但实际上它似乎只是$main 的高度，这使得$text块溢出，因此当我悬停在该块上使文本出现时，它会锁定在$main下方并裁剪部分文本。

是否有人知道如何使$text具有预期的高度，而不知道$title的高度（因此无法使用calc()，至少我不知道），而我不想以任何方式使用JavaScript?

你一定会喜欢那种带有失效链接的问题。请请务必链接到像jsfiddle/plnkr/codepen等网站，这样问题至少还能保留下来。 - Robert Koritnik
@RobertKoritnik 没错！非常抱歉这么晚才回复，但我已经在帖子中更新了一个fiddle链接。感谢您指出这个问题，我真的很感激。 - chriskirknielsen
2个回答
16

我已经重新编写了代码，没有使用任何高度来处理块文本或标题文本，只使用Flex。如果您在容器上使用display: flex; 仅包含其中的可伸缩项，则告诉每个项目如何具有灵活性（即flex-grow: 1;），您将得到所需的结果。这里是一个链接到fiddle的示例代码，我使用您的初始代码并重新编写了代码。如果您有任何问题或需要澄清，请告诉我。

body {
  font-family: 'Bitter', Georgia, serif;
  width: 673px;
}
a { color: #161616; text-decoration: none; }
* { box-sizing: border-box; }

.home_post_new * { transition: .5s all; }

.home_post_new {
  background-position: right center;
  background-repeat: no-repeat;
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.home_post_new_text {
  float: right;
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 100%;
  background: hsla(0,0%,100%,0);
  color: #fff;
  position: relative;
}

.home_post_new:hover .home_post_new_text {
  background: hsla(0,0%,0%,.33);
}

.home_post_new_block {
  flex-grow: 2;
  position: relative;
  top: 250px;
  width: 100%;
  padding: 16px 16px 32px;
  font-size: .9em;
  line-height: 125%;
  text-shadow: 0 1px 0 hsla(0,0%,0%,.75), 0 0 5px hsla(0,0%,0%,.75);
}
.home_post_new:hover .home_post_new_block {
  top: 0;
}
.home_post_new_title {
  flex-grow: 1;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1.625em;
  line-height: 1.333em;
  width: 100%;
  padding: 4px 8px 16px;
  text-shadow: 0 1px 0 hsla(0,0%,0%,.75), 0 0 1px hsla(0,0%,0%,.75), 0 1px 5px hsla(0,0%,0%,.75);
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}

.home_post_new_more {
  position: absolute;
  right: 0;
  bottom: -50%;
  padding: 4px 8px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 hsla(0,0%,0%,.75), 0 0 5px hsla(0,0%,0%,.75);
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: currentColor;
  border-radius: 0; 
  border-top-left-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: hsla(0,0%,0%, .5);
}
.home_post_new_more:hover {
  color: #009884;
  cursor: pointer;
}
.home_post_new:hover .home_post_new_more {
  bottom: 0;
}


.home_post_new_meta {
  width: calc(100% - 600px);
  height: 100%;
  text-align: center;
  color: #009884;
}

.home_post_new_date {
  background: #009884;
  color: #eee;
  padding: 24px 0 0;
  height: 50%;
}

.home_post_new_date_day {
  font-size: 250%;
  font-weight: bold;
}

.home_post_new_date_month {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  text-transform: uppercase;
  font-size: 150%;
  border-top: 1px solid #eee;
  display: inline-block;
  margin-top: 8px;
  padding-top: 4px;
}

.home_post_new_date_comments {
  color: currentColor;
  display: inline-block;
  border-radius: 50%;
  border-bottom-right-radius: 0;
  width: 42px;
  height: 42px;
  margin-top: 32px; 
  padding: 12px 4px;
  border: 1px solid currentColor;
  margin-top: calc(50% - 4px);
}

.home_post_new_text:after {
  clear: both;
  overflow: auto;
  zoom: 1;
}
<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/fetch_ifl.jpg);">
  <a class="home_post_new_text" href="#">
    <div class="home_post_new_title">[Test] inFAMOUS : First Light</div>
    <div class="home_post_new_block">
      <p>Après les aventures de Delsin, voici inFAMOUS : First Light, qui propose de jouer dans la peau d’un personnage secondaire de Second Son : Fetch. Une aventure qui est, à l’instar de Festival of Blood pour inFAMOUS 2, une extension ne nécessitant pas le jeu de base. Même ville, différents pouvoirs (enfin, pas vraiment), nouvelle histoire et un mode de jeu en plus… De quoi s’amuser un peu ! Mais qu’est-ce que ça vaut ? Voyons cela.</p>
    </div>
  </a>
  <div class="home_post_new_more">Lire la suite &rarr;</div>
  <div class="home_post_new_meta">
    <div class="home_post_new_date" title="30 novembre 2014">
      <div class="home_post_new_date_day">30</div>
      <div class="home_post_new_date_month">NOV</div>
    </div>
    <a href="#" class="home_post_new_date_comments" title="2 commentaires">2</a>
  </div>
</div>

<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/monumentvalley.jpg);">
  <a class="home_post_new_text" href="#">
    <div class="home_post_new_title">[Test] Monument Valley</div>
    <div class="home_post_new_block">
      <p>Profitant d’un crédit de 3€ offert par Amazon sur leur App Shop, je me suis laissé tenter par Monument Valley, ayant entendu du bien du jeu et étant assez intrigué son style. Au pire, je ne perdais rien dans l’affaire… Après plusieurs courtes séances, j’ai terminé le jeu et j’ai donc pu forger un avis assez complet dessus, malgré le fait que Monument Valley soit un « petit jeu », mais il ne faut pas négliger son ambition et potentiel pour autant. </p>
    </div>
  </a>
  <div class="home_post_new_more">Lire la suite &rarr;</div>
  <div class="home_post_new_meta">
    <div class="home_post_new_date" title="28 octobre 2014">
      <div class="home_post_new_date_day">17</div>
      <div class="home_post_new_date_month">NOV</div>
    </div>
    <a href="#" class="home_post_new_date_comments" title="37 commentaires">37</a>
  </div>
</div>

<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/interstellar.jpg);">
  <a class="home_post_new_text" href="#">
    <div class="home_post_new_title">[Séance ciné] Interstellar</div>
    <div class="home_post_new_block">
      <p>Alors comme ça le prochain long-métrage de Christopher Nolan est sorti ? La science-fiction, c’est mon truc, ça ! Je me suis évité tout spoiler possible sur ce film, cette critique en fera autant. J’ai eu le plaisir de voir Interstellar en IMAX, ma première séance dans ce format d’ailleurs, ce qui ne m’a pas déçu. Bon allez, on va voir tout ça, 3… 2… 1… décollage !</p>
    </div>
  </a>
  <div class="home_post_new_more">Lire la suite &rarr;</div>
  <div class="home_post_new_meta">
    <div class="home_post_new_date" title="28 octobre 2014">
      <div class="home_post_new_date_day">11</div>
      <div class="home_post_new_date_month">NOV</div>
    </div>
    <a href="#" class="home_post_new_date_comments" title="37 commentaires">37</a>
  </div>
</div>

<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/johnwick.jpg);">
  <a class="home_post_new_text" href="#">
    <div class="home_post_new_title">[Séance ciné] John Wick</div>
    <div class="home_post_new_block">
      <p>Encore un film qui est sorti de nulle part pour moi, John Wick a attiré mon attention, notamment grâce à la présence de l’immortel Keanu Reeves sur l’affiche. Malgré la minuscule salle (vous savez, celle pour 40 personnes qu’on paie aussi cher que les énormes salles…), j’ai bien pu me mettre dans le film. Chargez vos fusils, on va voir ce que ça donne.</p>
    </div>
  </a>
  <div class="home_post_new_more">Lire la suite &rarr;</div>
  <div class="home_post_new_meta">
    <div class="home_post_new_date" title="28 octobre 2014">
      <div class="home_post_new_date_day">28</div>
      <div class="home_post_new_date_month">OCT</div>
    </div>
    <a href="#" class="home_post_new_date_comments" title="37 commentaires">37</a>
  </div>
</div>

<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2013/12/tlou_goodies.jpg);">
  <a class="home_post_new_text" href="#">
    <div class="home_post_new_title">[Avis de passage] Goodies The Last of Us : Press Kit, figurine…</div>
    <div class="home_post_new_block">
      <p>Bon, c'est un arrivage qui date un peu, mais je tenais à vous présenter quelques goodies tirés de The Last of Us, non seulement parce que j'adore ce jeu mais parce que ces chouettes objets sont plutôt réussis, et étant donné qu'ils ne sont vus que par mes petits yeux, pourquoi ne pas vous en faire profiter un peu également ? Et ce n'est certainement pas un moyen de faire du contenu en attendant que je fasse mes tests de jeux PS4, je vous assure ! Bon j'ai pris un paquet de photos, c'est cadeau.</p>
    </div>
  </a>
  <div class="home_post_new_more">Lire la suite &rarr;</div>
  <div class="home_post_new_meta">
    <div class="home_post_new_date" title="28 octobre 2014">
      <div class="home_post_new_date_day">28</div>
      <div class="home_post_new_date_month">OCT</div>
    </div>
    <a href="#" class="home_post_new_date_comments" title="3 commentaires">3</a>
  </div>
</div>

0

所以让我明白一下，你有：

<div class='main'>
    <div class='title'>
        <div class='text'></div>
    </div>
</div>

将 text div 的高度设置为 100%，即使它位于 title div 内部，也会将其设置为 main div 的高度。我认为问题可能在于您的 CSS 中没有指定 .title 的高度。如果您没有指定标题 div 的高度，则文本部分将采用主 div 的高度。

再次强调，这只是一个猜测，请检查一下！

嘿，感谢您的查看！不，实际上title和text是兄弟节点（我在上面的帖子中写了结构）。正如我所说，title具有可变高度，因此我无法指定固定值。您是正确的。我尝试将高度设置为像素，看起来好像可以工作。有没有解决办法？由于title具有可变高度，我恐怕不能使用那个解决方案。 - chriskirknielsen
嗯，很难解决的问题。不确定该怎么办。 - Tai Kwangi Chicken
感谢您的关注。在这种情况下，我认为我需要使用JS或flexboxes。 - chriskirknielsen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接