使用 @media 移除高度属性

Question

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>

当屏幕宽度小于700px时，我想要移除height属性。如果使用height:0px;，会完全隐藏段落。是否有CSS解决方案？还是需要使用jQuery？

- Toby

---

你的代码有很多错误。你把空格放错了地方，比如在150和px之间。使用语法高亮器。 - I haz kode

那没关系 @Ihazkode - Toby

CSS 不会读取 150 px，它只会读取 150px。同样适用于你的代码在编辑之前具有的 overflow - y: hidden;。 - I haz kode

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>

顺便提一下: 你需要写成这样 @media screen and (min-width:700px) -> "700"和"px"之间无空格，min-height中"150"和"px"之间无空格，但是在媒体查询的"and"和开头的"("之间有一个空格。

- Johannes

Answer 2

对于较小的屏幕，您可以添加媒体查询height: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
  }
}

- Martin54

Answer 3

height: auto会起到作用，因为它会将高度“重置”为默认高度，所以您不必担心运行时的高度。

auto

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

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

- CodeWizard

Answer 4

尝试在媒体查询中使用max-width为699的情况下，使用height: auto; 然后将height: 150px;放置在另一个媒体查询中，在该宽度范围之上，min-width为700。

- Koushik Chatterjee

---

为什么@CodeWizard？ - Toby

由于它会覆盖任何其他CSS定义并且难以维护，你将很难弄清为什么是0。如果有人需要维护你的代码，他也会很困难。 - CodeWizard

@CodeWizard 实际上是的，但是原始问题有一个通用的样式，需要进行覆盖，我已经相应地编辑了答案。 - Koushik Chatterjee

Answer 5

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

- Kermit