Question

有没有人知道如何使DIV表现得总是试图消耗它的最大空间（无论内容如何）？

例如，如果我的DIV的max-height为600px且min-height为200px，我该怎样才能这样做：

如果窗口高度大于600px，则会占用600px
如果窗口高度介于600px和200px之间，则会占用所有可用高度
如果窗口为200px或更少，则会始终占用200px？

我可以接受的上述替代方案是忽略最小高度，让它一直缩小。

最终，我想在窗口中垂直对齐它，但首先要做的事情。

如果可能，我更愿意使用纯CSS。如果涉及到它，我编写脚本来实现它不会有太多麻烦。

欢迎任何建议。

干杯。

Answer 1

仅使用height属性，您可以使用一组媒体查询

获取此行为

div {
   height: 200px;
}

/* needed to stretch the height of div */
@media all and (min-height: 201px) and (max-height: 600px) {
   html, body {
      height: 100%;
   }
}

@media all and (min-height: 201px) {
   div {
      height: 100%;
   }
}

@media all and (min-height: 601px) {
   div {
      height: 600px;

      /* if you need to vertical-align the div, use following rules */
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
   }       
}

实例（基本）：http://codepen.io/anon/pen/NPGbNq
实例（垂直对齐> 600px）http://codepen.io/anon/pen/yyYVag

Answer 2

通过合并height，max-height和min-height，您可以在没有媒体查询的情况下以非常简单的方式执行此操作。浏览器在它们之间进行调解。

div {
    height: 100%;
    max-height: 600px;
    min-height: 200px;
}

See example.

编辑 - 垂直居中

要包含垂直居中，还有一种没有媒体查询或CSS转换的智能方式。因此，该解决方案应该适用于IE8。

div {
    height: 100%;
    max-height: 600px;
    min-height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

See example. 使用this smart technique进行垂直对齐。

Answer 3

看到这个。在窗户的任何宽度和高度都会占据100％的宽度和100％的高度。

 div{
display: block;
background: red;
height: 100%;
width: 100%;
position: fixed;
}

click here

优选/最小高度

3 个答案: