Question

我正在尝试为我正在处理的网站设置流畅的列布局。我想在没有javascript的情况下这样做，但看起来这可能最终成为最简单的选择。无论如何，有人知道如何用CSS完成这项工作吗？

两列都需要填充浏览器高度。左列包含宽高比为2：3的图像，高度为100％，宽度为自动，因此左列的宽度将根据浏览器的高度而变化。右栏需要填补剩余空间。

我看到了一个使用float的技巧：left和overflow：隐藏了很好的工作，除了在调整浏览器窗口大小时div没有正确调整大小。

这里有一个简化的小提示来演示问题，下面的CSS：

.left-column {
    float: left;
}
.left-column img {
    height: 100%;
    display: block;
    width: auto;
}
.right-column {
    box-sizing: border-box;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.left-column, .right-column {
    height: 100%;
}

https://jsfiddle.net/v7unnhnc/2/

似乎.left-column不会自动调整大小。有什么想法吗？

Answer 1

基本上你的代码工作正常。您可以将display:inline-block添加到左侧列，并且在垂直调整大小时您会看到img容器适应，但此时文本不会正常流动。

问题（如果有问题）是您的容器的宽度（左侧）...与您的width:auto的宽度（并且您不需要将它添加到您的CSS中作为您的当隐藏溢出时，图像将设置容器的宽度。当浮动时，即使您在视觉上可以看到它，也无法在不重新加载页面的情况下理解img的大小。

但重要的是要知道，如今许多网络开发人员过于专注于（imho）制作响应式设计，同时调整GOAL不是那样的窗口。主要目标是让您的网站适应您的用户（或未来用户）在加载网页时拥有的任何窗口大小。你的代码就是正确的。

像我们这样的人可能会进入网络并开始手动调整窗口大小以检查响应性......即便如此，我们这位广大的mayoritie只需检查它在x轴上调整大小。

当你调整窗口大小（Y轴）时，你必须让某人注意到你的网络无法正常工作是......好吧，我希望你有很多人注意到了。这意味着你有很多访客。

具有100％高度图像的流体柱

1 个答案: