Question

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

Answer 1

还包括#test的以下属性：

height: 100%;
width: 100%;

这里的小提琴链接：http://jsfiddle.net/Nx5Zb/

使用嵌入式整页结果：http://jsfiddle.net/Nx5Zb/embedded/result/

CSS首选高度，最大高度

1 个答案: