具有 100% 高度图像的流体柱答案

【问题标题】：fluid columns with 100% height image具有 100% 高度图像的流体柱
【发布时间】：2015-06-21 22:23:45
【问题描述】：

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

两列都需要填充浏览器高度。左列包含纵横比为 2:3 的图像，高度为 100%，宽度为 auto，因此左列的宽度将根据浏览器的高度而变化。右列需要填满剩余空间。

我看到了一个使用 float:left 和 overflow:hidden 的技巧，效果很好，除了当调整浏览器窗口大小时 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 不会自动调整大小。有什么想法吗？

【问题讨论】：

标签： css height fluid-layout dynamic-columns

【解决方案1】：

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

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

但重要的是要知道，如今许多 Web 开发人员过于专注于（恕我直言）制作响应式设计，同时调整 GOAL 并非如此的窗口大小。主要目标是让您的网站适应您的用户（或未来用户）在加载您的网站时所拥有的任何窗口大小。你的代码就在上面。

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

在调整窗口大小（y 轴）时，您必须让别人注意到您的网络无法正常工作的机会是……好吧，我希望您有很多人注意到。这意味着您有很多访客。

【讨论】：