滑块没有高度并且不显示，除非我设置硬编码高度

Question

我正在尝试从 zeto 创建一个滑块组件以用于我的项目。我目前面临的问题是滑块的高度为 0，除非我将硬编码高度设置为 height: 50rem;。我看不出这是什么原因或原因。

您可以在此处找到有效的代码片段：https://jsfiddle.net/fj640arc/1/

您应该删除 .slider CSS class 上的 height: 50rem; 以查看它的外观。我不应该对滑块的高度进行硬编码。

此外，如果您对此滑块的响应图像有任何帮助，我们将不胜感激。我如何改进此滑块图像以使其能够正确地适合滑块而不破坏它？

谢谢！

Answer 1

如果您希望添加响应式高度调整，请尝试更改高度以使用 vh 而不是 rem。例如，您可以使用：

.slider {
  max-width: 114rem;
  height: 50vh;
  position: relative;
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15);
}

vh 代表视口高度，将其设置为 50 将确保您的滑块始终位于屏幕高度的 50%，而不管屏幕的特定尺寸如何。

如果您希望进一步实施响应式设计，则需要考虑各种屏幕尺寸。

元标签

包含元标记将帮助您设置缩放级别并根据屏幕尺寸进行调整。以下元标记可能是您要查找的内容，但请在线阅读更多内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width部分设置页面的宽度以跟随设备的screen-width（这会因设备而异）。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

网格布局和 Flexbox

接下来，我将研究您如何布置屏幕。实现此目的的两种非常好的方法是实施网格布局或 flex-box。 W3Schools 提供了关于这两种技术的重要信息。

媒体查询

最后，您还可以包含媒体查询以根据屏幕尺寸使用某些 CSS 代码。例如，如果浏览器为 600 像素或更小，此 CSS 代码将运行：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

如果像素不是您想要比较的对象，您也可以在媒体查询中使用 vh、em 和 rem。

Answer 2

当您定位项目时，您将它们从文档流中取出。

您必须删除

位置：相对； slider__item-list

中的声明

Slider has no height and doesn't display unless I set hardcoded height