使用@media 删除高度属性答案

【问题标题】：Remove height property using @media使用@media 删除高度属性
【发布时间】：2017-12-28 13:03:28
【问题描述】：

p {
  overflow-y: hidden;
  height: 150px;
}

@media screen and(min-width: 700 px) {
  p {
    max-height: 150 px;
  }
}

<p>
   Hello Hello Hello Hello Hello Hello Hello Hello Hello
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</p>

<strong>h1</strong>

我想在屏幕宽度小于 700 像素时删除 height 属性。如果我这样做height:0px;，它会完全隐藏该段落。任何CSS解决方案？还是我需要使用 jQuery？

【问题讨论】：

你的代码有一堆错误。你在错误的地方有空格，比如 150 到 px 之间。使用语法高亮
没关系@Ihazkode
CSS 不读取150 px，它只读取150px。 overflow - y: hidden; 与您的代码在编辑之前的相同。

标签： html css responsive-design media-queries

【解决方案1】：

在媒体查询中使用height: auto。这是默认设置。它将覆盖标准 CSS 中的固定高度。

p {
  overflow-y: hidden;
  height: 150px;
  background: green;
}

@media screen and (min-width: 700px) {
  p {
    height: auto;
    max-height: 150px;
    background: yellow;
  }
}

<p>
  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</p>

<strong>h1</strong>

顺便说一句：你必须写@media screen and (min-width: 700px) ->“700”和“px”之间没有空格，min-height 的“150”和“px”之间没有空格，但“and”和开头之间有空格媒体查询中的“（”

【讨论】：

【解决方案2】：

对于较小的屏幕，您可以添加媒体查询高度：自动

@media screen and(max-width: 700 px) {
  p {
    height:auto
  }
}

或者只在大屏幕上创建高度。

p {
  overflow-y: hidden;
}
@media screen and(min-width: 700 px) {
  p {
    height:150px
  }
}

【讨论】：

【解决方案3】：

height: auto 将完成这项工作，因为它会将其“重置”为默认高度，因此您不必担心运行时高度。

auto

浏览器会计算并选择指定元素的高度。

如果没有明确指定包含块的高度，并且元素不是绝对定位的，则其高度值计算为auto（它将与其中的内容一样高，如果没有内容则为零）

【讨论】：

【解决方案4】：

当您不使用height 属性时，CSS 将使用默认值height。所以你可以将height属性设置为默认值auto。

【讨论】：

【解决方案5】：

在媒体查询中尝试height: auto;，其中max-width 是699

然后将 height: 150px; 放在该宽度范围上方的另一个媒体查询中，min-width 是 700

【讨论】：

为什么要@CodeWizard
由于它将覆盖任何其他 css 定义并且难以维护，您将很难弄清楚为什么它是 0。如果其他人必须维护您的代码，他将很难跨度>
@CodeWizard 好吧，事实上是的，但是 OP 有一个通用样式，必须被覆盖，我已经相应地编辑了答案