tags:

views:

106

answers:

4

hello,

I have the following html/css code . When I have the screen resolution to 1024*768 the height is 400px.But when I change the screen resolution to 1600*1200 the height does not increase.I am using FF 3.5.2. Can anyone tell what the problem is ?

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<style>

#mit
{
width:1000px;
max-height:1200px;
min-height:400px;
} 

</style>
</head>
<body>
    <div id="mit" class ="box" style="border-right: #336699 thin solid; border-top: #336699 thin solid; 
        border-left: #336699 thin solid; border-bottom: #336699 thin solid;
        position: relative;" >

    </div>
</body>
</html>
A: 

Since you don't specify otherwise, the height is auto.

Since there is no content in the div, the computed height is 0. This is overridden by the min-height to be 400px.

David Dorward
+3  A: 

In CSS, min-height requires that the minimum height of a box be X units in size until the content within it forces it larger. This means that it will never get bigger if your resolution changes, and the content still fits in 400px.

However, you could use media selectors to do what you want.

The Wicked Flea
A: 

There is no reason for it to grow to more than 400px as there is no content that needs it. As long as the box is empty, it will have the minimum height.

jeroen
A: 

If you want to grow up your box when the resolution increase you have to use javascript/jquery. It is the easiest way to manipulate the height.

sn3ek