auto grow/shrink of div to the mobile screen height

Question

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

Answer 1

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

Answer 2

您可以使用 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;
}

auto grow/shrink of div to the mobile screen height

Auto grow/shrink of divs to the mobile screen height

css

flexbox

height

scrollbar

viewport