Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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>

BTW：你必须写@media screen and (min-width: 700px) - ＆gt; “700”和“px”之间没有空格，min-height的“150”和“px”之间没有空格，而“和”之间的空格和媒体查询中的“（”）之间的空格

Answer 2

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

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

或仅在较大的屏幕上创建高度。

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

Answer 3

在height: auto;为max-width

的媒体查询中尝试699

然后将height: 150px;置于该宽度范围之上的另一个媒体查询中，min-width为700

Answer 4

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

auto

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

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

Answer 5

如果不使用height属性，CSS将使用默认值height。因此，您可以将height属性设置为默认值auto。

使用@media删除height属性

5 个答案:

`auto`