Question

我的网页包含两个<div>块：.fixed和.stretch。在这里，您可以看到它的HTML和CSS代码：http://jsfiddle.net/p2bhuzs0/。我的问题是，当我调整浏览器窗口大小以使.stretch块的宽度小于其min-width值时，块上方会出现一个空白行。

如何使其不显示，而不是显示垂直滚动条？

Answer 1

您似乎正在尝试有效地创建列表布局*（虽然没有使用table，因为您没有数据），为什么不使用CSS表？

Demo Fiddle

CSS：

.container {
  position: relative;
  background: #ddd;
  border: 1px solid #999;
  display:table;
}
.fixed, .stretch{
    display:table-cell;
}
.fixed {
    width: 420px;
}
.fixed div{
    background-color: limegreen;    
    margin-right:20px;
}

.stretch {
    background-color: lightblue;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 300px; /* When less than this value, a blank row appear above .stretch block */
    max-width: 500px;
}

然后，您需要将固定列的内容包装在另一个div

中

调整窗口大小时出现空白行

1 个答案:

Demo Fiddle