javascript - CSS 首选高度和最大高度

标签 javascript html css

我有一个 div，它应该有一个最大高度和一个首选高度。在下面发布的示例中，我的 #test 具有黑色背景和最大高度 800px。当浏览器视口(viewport)有足够的可用空间时，它应该取 800px。如果可用空间较少(即移动设备)，则应使用最大可用空间量。如何最好只使用 CSS 来实现这一目标？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Prototype</title>
        <style>
            body, html {
                margin: 0;
                height: 100%;
                width: 100%;
            }

            #test {
                background-color: black;
                background-position: center;
                background-repeat: no-repeat;
                max-height: 600px;
                max-width: 800px;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>

最佳答案

还包括以下属性到 #test: