Menu
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>
988
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/
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
