CSS 100% 流畅的网站答案

【问题标题】：CSS 100% fluid websiteCSS 100% 流畅的网站
【发布时间】：2015-08-26 01:18:18
【问题描述】：

有没有办法让网站 100% 流畅？

就像这样，无论浏览器窗口的大小如何，都用图像从边缘到边缘填充背景。此外，让它随着浏览器窗口的变化而变大或变小，而不必保留纵横比。 div 和字体大小中的图像显然应该相应地调整大小并保持相同数量的空白空间，以便页面在从 800x600 到 4K 超高清的屏幕中显示完全相同的内容，这是任何类型的垂直滚动条之上的想法。让我们暂时忘掉手机和平板电脑吧。

我对背景的尝试：

body {
background-image:  url(./Si0rPf7.png);
background-size:   contain;                      
background-repeat: no-repeat;
background-position: center center;            
}

只要图像的纵横比保持不变，它就会适合背景，当它改变时，你会看到两边都有空白。如果覆盖而不是包含，图像将被裁剪，如果我们想向所有人展示我们的整个背景，这是不可取的，即使我们必须拉伸它。

现在，对于 img src，我用两种方法取得了一半的成功：

.image_1 {width: 100%; height: auto;}

和

  <img src="img/image_1.jpg" width="100%"/>

它们似乎都不能同时对宽度和高度做出反应。看起来你必须在其中一个或另一个之间做出选择。

对于字体大小，我只会使用 vw 并希望做到最好。

【问题讨论】：

这也刚刚出现在 CodePen 上：codepen.io/derekjp/pen/avodwL

标签： html css

【解决方案1】：

你想要的

background-size:100% 100%;

【讨论】：

有效。我可以对网站的每个部分都遵循相同的原则吗？
任何有背景图片的地方都可以使用。
但我需要让所有内容都随高度和宽度变化，而不仅仅是背景图像。
background-size 仅适用于背景，并将背景图像缩放和拉伸到容器的大小。这不考虑 div 的大小或文本大小。

【解决方案2】：

您应该查看 flex 模型：https://philipwalton.github.io/solved-by-flexbox/demos/grids/

【讨论】：

但是 flex 模型不是根据宽度调整大小吗？我正在尝试制作没有垂直滚动条的东西。有点像一个屏幕，所见即所得，当您加载页面时，整个内容就在那里，您无需向下滚动即可查看。
@thenchanter flex 模型的优点之一是您可以转动轴并以任何您想要的方式流动您的内容：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
如何让link 流动到高度，这样当空间不足时，整个内容会拉伸而不是垂直滚动条？我需要一种溶液高度和宽度。所以绿色页脚将始终粘在可见窗口的底部，其余元素将被填充。
@thenchanter 如果您查看我发送给您的第一个链接，您正在做的事情还有两个有趣的示例：粘性页脚和圣杯示例。他们几乎可以满足您的要求。