CSS preferred height with maximum height

Question

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>

hjpotter92 · Accepted Answer · 2013-04-19 11:34:50Z

4

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/

answered Apr 19, 2013 at 11:34

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deathspike Over a year ago

Simple and elegant! Thanks! I will accept this answer in 9 minutes :-)

Collectives™ on Stack Overflow

CSS preferred height with maximum height

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related