Question

我有以下html / css代码。当我的屏幕分辨率为1024 * 768时高度是400px。但是当我将屏幕分辨率更改为1600 * 1200时，高度确实如此没有增加。我正在使用FF 3.5.2。任何人都能说出问题所在吗？

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>

Answer 1

在CSS中，min-height要求盒子的最小高度为的X单位，直到其中的内容强制它为止。这意味着如果你的分辨率改变，它将永远不会变大，内容仍然适合400px。

但是，您可以使用media selectors来执行您想要的操作。

Answer 2

由于您未另行指定，height为auto。

由于div中没有内容，因此计算出的高度为0. min-height将其覆盖为400px。

Answer 3

没有理由将其增长到超过400px，因为没有内容需要它。只要盒子是空的，它就会有最小的高度。

Answer 4

如果你想在分辨率增加时长大你的盒子，你必须使用javascript / jquery。这是操纵高度最简单的方法。

CSS：max-height无效

4 个答案: