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

Question

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

我想要的是一个有页眉、内容和页脚的页面，就像大多数网页一样。当我使用1920x1080显示器时，我将其作为我的标准。然而，问题是，并不是每个人都在使用1080p显示器。一些人正在使用旧的1280x1024标准，或者使用高度可以达到2560px的平板电脑(我不是在做智能手机，因为由于屏幕宽度很小，它们将有完全不同的设计)。在我的页面上，我有覆盖固定宽度的图片。如果此宽度大于视口的宽度，则图像将显示在彼此下面：

(右击图像并选择“显示图像”以全尺寸查看)

正如您在此图像中看到的，当视口较小时，图像将堆叠并从背景中落下。“Follow me on：”部分甚至让人感觉完全是。我想做的是，当这种情况发生时，使内容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>