如何在 div 上为移动设备但固定桌面设置自动高度答案

【问题标题】：how to set automatic height on div for mobile but fixed desktop如何在 div 上为移动设备但固定桌面设置自动高度
【发布时间】：2019-05-02 02:58:45
【问题描述】：

我有一个地铁风格瓷砖的网站。在桌面上，所有图块的宽度都是固定的。不过，我希望某些 div 在移动到移动设备时基于内容高度。

如果我将高度设置为自动，div 就会消失。

我的网站是http://p2p.rudtek.com/you/。桌面顶部的照片是宽瓷砖，下面的内容是高瓷砖。

.tile.tall {
    width: 488px;
    height: 737px;
}

.tile-post.wide {
    width: 737px;
    height: 488px;
       color: #FFFFFF;
       font-size: 4em;
}

当它进入移动设备时，我希望它们是全宽和自动高度。

我试过了：

@media screen and (max-width: 480px) {
  .tile-post.wide {
    width: 100%;
    height: auto;
    padding-bottom:0;
  }
  .tile-post.tall {
    width: 100%;
    height: auto;
  }
}

宽度很好，但是当我使用 auto 时它们不会显示出来，所以我必须设置一个高度。有没有办法让它们根据内容自动高度？

【问题讨论】：

你能分享更多你的代码吗？我的猜测是其他东西正在覆盖您的高度设置。
查看您的网站，您使用的是绝对定位。没有堆叠框架就无法自动高度
@bertrand 现场使用绝对高度和自动高度 page2pro.com
这似乎是一个愚蠢的问题，但是：您确定文本在 div 内而不是在另一个容器中吗？没有文字 = 没有高度，除非硬设置。

标签： css responsive-design height

【解决方案1】：

您需要将此添加到您的移动 CSS：

@media screen and (max-width: 480px) {
   .tile-post > :first-child
   {
      position:relative;
   }
}

【讨论】：

感谢您的帮助。它似乎没有用。我的实时网站在移动设备上使用绝对值，并且尊重自动高度。