与包含数据的div相等的高度 - CSS

Question

我试图给各种屏幕尺寸的所有div提供相同的高度。但是，在不同屏幕尺寸的移动设备上，这无法正常工作

我的代码：

https://jsfiddle.net/90umLkak/

{{1}}

Answer 1

您的身高样式完全没用，因为父亲没有身高。它似乎工作得很好的原因是因为你的图像尺寸缩放，它们的尺寸比例为1：1，使得高度正确。

由于您发布的代码绝对无法使用，我已经为您提供了一个MINIMAL代码段，以展示您的操作方式。

＆＃13;

＆＃13;

.container {
  width: 200px;
  height: 100px;
}

.container .big {
  height: 100%;
  width: 50%;
}

.container div {
  height: 50%;
  width: 25%;
  float: left;
  border: 1px solid white;
  background-color: blue;
  box-sizing: border-box;
}

＆＃13;

<div class="container">

  <div class="big"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

说height: 50%的规则不起作用，因为没有参考高度。即 - “50％的什么？”

解决方案是设置父容器的高度。在您的情况下，您必须明确设置classname CustomList-customListContainer的div的高度。

如果我可以提前一步，那么您的代码还有许多其他问题。我只会列出其中的四个。

1. 使用css类定义样式是个好主意，而不是使用内联样式规则
2. 不要尝试使用边距更改图块的高度（例如，在内容为+3的图块中）。应使用边距属性来设置边距，而不是高度或宽度。
3. “+3”磁贴中的div有top: 37%，根本不起作用。如果position为relative，则无法设置最高值。
4. 你似乎试图重新发明轮子。如此多的CSS规则只会让创建一个好产品变得更难（相当格式化时会有30000多行）。相反，使用像bootstrap这样的框架来实现网格。使网站对不同类型的屏幕响应非常容易。

无论如何，下面显示的是如何修复此类问题的示例，请注意我是如何将父div添加到图像div元素以修复容器的高度。