css - 为 div 创建动态高度

Question

我有一个包含产品信息(图片、标题、描述、价格等)的简单 div。我在桌面上使用 bootstrap (3.x)，我为 div 使用了特定的高度，所以一切都相等，显示在 2 列中。在移动设备上，我只有一列，我想找到一种方法使 div 高度根据大小动态变化，而不是设置特定的像素高度(描述各不相同，并且可以相当大地改变 div 的高度)。这可能吗？ div是从数据库动态创建的...这是当前的 css - 如您所见，我现在正在使用像素设置高度。

.prodBox2 { 
height: 300px;
margin-bottom: 10px;
padding:5px; 
border: 3px solid #666666;
border-radius:25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}

如果有帮助，这里有一个 codlin 链接: http://codepen.io/shadowfax007/pen/xVqQNm

Answer 1

默认情况下，任何 div 的高度都是动态的。因此，您需要做的就是将高度条件包装在媒体查询中(屏幕宽度超过 768px):

@media(min-width: 768px) {
  .prodBox2 {
    height: 300px;
    overflow-y: auto;
  }
}
.prodBox2 {
  margin-bottom: 10px;
  padding: 5px;
  border: 3px solid #666666;
  border-radius: 25px;
  font-family: arial;
  font-size: .8em;
  color: rgb(50, 50, 50);
}
.prodImage2 {
  float: left;
  margin: 10px;
  width: 125px;
  height: auto;
}

作为旁注，您可能想阅读一些有关响应的文章，但您目前做错了。在任何良好的响应式设计中，您都不需要指定高度。