将 div 自动增长/缩小到移动屏幕高度答案

【问题标题】：Auto grow/shrink of divs to the mobile screen height将 div 自动增长/缩小到移动屏幕高度
【发布时间】：2020-08-28 14:36:49
【问题描述】：

我想知道是否有可能摆脱在移动设备上查看 3 行的垂直滚动，它应该适合/拉伸到屏幕高度并在屏幕高度小于应有高度时缩小，所以如果有更高的设备所有元素都会按比例增长以适应整个屏幕的高度，而不是在每次容器元素的高度总和大于屏幕高度时出现滚动条。我应该使用哪些属性？谢谢。

【问题讨论】：

标签： css flexbox height scrollbar viewport

【解决方案1】：

您可以使用 CSS Flexbox 来做到这一点。我发布了一个我相信会产生您想要的效果的示例。

在 HTML 中，一个 div 中包含三行（页眉、主页、页脚）：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
</head>
    <body>
        <div>
            <header>
                <p>Header</p>
            </header>
            <main>
                <p>Main</p>
            </main>
            <footer>
                <p>Footer</p>
            </footer>
        </div>
    </body>
</html>

和 CSS：

html, body {
    margin: 0;
    padding: 0;
}
div {
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
}

header {
    background-color: lightblue;
    flex: 1 1;
}

main {
    background-color: lightcyan;
    flex: 1 1;
}

footer {
    background-color: lightgreen;
    flex: 1 1;
}

【讨论】：

【解决方案2】：

您可以使用 CSS 网格并设置一个包含 3 行的模板，并将每个行元素的高度设置为 33.33333%。这样可以确保元素占据整个屏幕。

【讨论】：

如果我的移动设备的高度不足以一次看到所有三行，它会放置滚动条而不是缩小 div 以适应我的移动屏幕的高度吗？谢谢。
不，它会挤压它。在这种情况下，在 600 像素或 900 像素处添加媒体查询以删除高度属性。