调整视口大小时动态更改元素高度

Question

当视口使用纯CSS调整大小时，是否可以更改HTML元素的高度？这个问题很难解释，但我还是会尝试：

我想要的是一个带有标题，内容和页脚的页面，就像大多数网页一样。当我使用1920x1080显示器时，我正在使用它作为我的标准。但问题是并非所有人都使用1080p显示器。有些人使用较旧的标准，1280x1024或使用平板电脑，其高度可以是2560px（我不是在做智能手机，因为屏幕宽度较小，因此设计会有完全不同）。在我的页面上，我有图像，覆盖固定的宽度。如果此宽度大于视口的宽度，则图像将显示在彼此之下： （右键单击图像并选择“显示图像”以全尺寸查看）

正如您在此图像中看到的，当视口较小时，图像将堆叠并从背景中掉落。 “跟我来：”部分甚至完全感觉到了。我想要做的是，当发生这种情况时，要使内容div更大，所以所有内容都保留在页面上。我知道这可以使用height: auto，但是当你这样做时，页脚的固定高度将跟随它，并且在高度较大的屏幕上，可能会有一个白色边框，因为文档高度较小比视口高度。

Answer 1

花点时间了解min-width，min-height，max-width，max-height，（css属性）和device-width，device-height（css客户端视口的默认值）。我不能保证在您拖动/调整浏览器窗口或设备中的视口时会刷新它们，但我认为它们有助于您的样式规则。

Answer 2

我有点不清楚你的最终目标是什么，所以我做了最好的解释。如果它不是你想要的，请给我一个很好的心理形象，你想要做什么，我会尝试纠正它。

Live Demo

CSS：

html, body {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
}
#header, #content, #footer {
    position: absolute;
    width: 100%;
}
#header {
    top: 0;
    height: 70px;
    background: lightblue;
}
#content {
    overflow-y: auto;
    top: 70px;
    bottom: 70px;
    background: limegreen;
}
#footer {
    bottom: 0;
    height: 70px;
    background: purple;
}

HTML：

<div id="wrap">
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>