html - 将定义的高度更改为相对内容

Question

当窗口为“屏幕”大小时，我有一个定义了高度的 div。它内部有一个 div，内容以垂直和水平居中。在手机/平板电脑大小时，我想删除定义的高度，我希望 div 与其内部内容一样大(仅限高度值)。

HTML - Bootstrap 和 Wordpress 框架

<article>
 <div class="article-L" style="...">

  <div class="Lg-cell-wrap">
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
  </div>            

 </div><!-- / bg-img-L -->  
</article>

CSS

article {
 position: relative;
 margin-bottom: 10px;
 overflow: hidden;
 padding: 0;
}

.article-L { height: 570px; }

.Lg-cell-wrap {
 position: relative;
 width: 85%;
 margin: 0 auto;
 top: 50%;
 transform: translateY(-50%);
}

我尝试添加

@media screen and (max-width: 991px) {

  .article-L { height: auto; }
}

但是没用

编辑

https://jsfiddle.net/4voLqj5a/6/

出于某种原因，我只能通过创建 fiddle 来获得结果。我想要屏幕尺寸的设置高度，较小屏幕的相对高度

Answer 1

这是 height: auto; 的默认行为:

https://css-tricks.com/almanac/properties/h/height/

(height) will be as tall as the content inside it is, or zero if there is no content

这是我在运行您的代码时看到的，它的行为符合预期。你没有看到这个或者你期待什么？ transform 设置为 -50% 是将内部 div 拉出屏幕的原因。如果您不想这样做，也可以在媒体查询中覆盖它。

article {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0;
}
.article-L {
  height: 570px;
  background: yellow;
}
.Lg-cell-wrap {
  background: pink;
  position: relative;
  width: 85%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 991px) {
  .article-L {
    height: auto;
  }
}

<article>
  <div class="article-L">

    <div class="Lg-cell-wrap">
      <h1>The Content Title</h1>
      <!-- the content -->
      <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
    </div>

  </div>
  <!-- / bg-img-L -->
</article>