Question

当窗口是＆＃39;屏幕时，我有一个具有指定高度的div。尺寸。它有一个div内部，内容以vert和horiz为中心。在移动/平板电脑尺寸时，我想删除定义的高度，我希望div与其内部的内容一样大（仅限高度值）。

HTML - Bootstrap＆amp; 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/

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

Answer 1

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

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

（高度）将与其内部的内容一样高，如果没有内容则为零

这是我在运行代码时看到的内容，它的行为符合预期。你没有看到这个或你期待什么？设置在transform的{{1}}是将内部div从屏幕上移开的原因。如果您不想要，也可以在媒体查询中覆盖它。

-50%

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;
  }
}

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

1 个答案: