不应用 CSS div 高度和宽度

【问题标题】：CSS div height & width not be applied不应用 CSS div 高度和宽度
【发布时间】：2021-10-02 17:44:27
【问题描述】：

由于某种原因，我无法将高度和宽度应用于 div 元素。我正在使用 TailwindCSS 和 Nextjs。

我的目标是创建幻灯片以垂直对齐滚动，但在浏览器中删除了高度和宽度属性。

请给我任何建议，我很绝望。

这是我的容器和其中每个视图的 css：

  .snap-container {
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
  }
  .snap-view {
    height: 100vh;
    width: 100%;
    display: flex;
  }

【问题讨论】：

看起来和 .snap-view 类中的一样（其他已被剥离，因为已经应用...）

标签： html css next.js tailwind-css

【解决方案1】：

如果你有

.snap-container {
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
  }
  .snap-view {
    height: 100vh;
    width: 100%;
    display: flex;
  }

您的两种样式都将被应用，即使在图片上您只显示.snap/view

但在浏览器中删除了高度和宽度属性。

这是因为这些是您发布的代码之上的代码周围的其他属性，并且它们可能已被级联覆盖

如果您希望.h-screen 和.w-full 属性无论如何都适用，您可以将它们直接放入元素中，或者尝试将它们放入.snap-container 和.snap-view 下方的CSS 中

试试看，希望对你有帮助

【讨论】：