CODEWITHSUNDEEP
javascripthtmlcss
Deathspike
Deathspike

Reputation: 8770

CSS preferred height with maximum height

I have a div that should have a maximum height and a preferred height. In the sample posted below, I have #test with a black background and a maximum height of 800px. When the browser view-port has sufficient available space, it should take 800px. If less space is available (i.e. mobile devices), the maximum amount of available space should be used. How can this be achieved with preferably just 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>

Upvotes: 3

Views: 3904

Answers (1)

hjpotter92
hjpotter92

Reputation: 80639

Also include the following attributes to #test:

height: 100%;
width: 100%;

Fiddle link here: http://jsfiddle.net/Nx5Zb/

With embedded full-page result: http://jsfiddle.net/Nx5Zb/embedded/result/

Upvotes: 4

Related Questions