CSS首选高度与最大高度

Question

CSS首选高度与最大高度

3

我有一个 div，它应该有一个最大高度和首选高度。在下面发布的示例中，我有带有黑色背景和最大高度为 800px 的 #test. 如果浏览器视口有足够的可用空间，它应该占用 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>

- Deathspike

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hjpotter92 · Accepted Answer

同时在#test中也需要包含以下属性：

height: 100%;
width: 100%;

这是一个Fiddle链接：http://jsfiddle.net/Nx5Zb/ 还有一个嵌入式的完整页面结果：http://jsfiddle.net/Nx5Zb/embedded/result/