Html 首选/最小高度

是否有人知道如何使DIV的行为方式使其始终尝试使用其最大空间（无论内容如何）

例如，如果我有一个DIV的

max height

为

600px

，而

min height

为

200px

，我如何使其能够：

• 如果窗口高度大于

  600px

  足够大，它将占用

  600px

• 如果车窗高度介于

  600px

  和

  200px

  之间，它将占据所有可用高度
• 如果窗口为

  200px

  或更小，它将始终占用

  200px

我可以接受的另一种选择是忽略最小高度，让它一直向下扩展

最后，我想在窗口中垂直对齐它，但首先要做的是

如果可能的话，我更喜欢使用纯CSS。如果是这样的话，我写一个脚本来实现它不会有太多麻烦

欢迎任何建议

---

干杯。

仅使用

height

属性，您可以使用一组MediaQuery获得此行为

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%);
   }       
}

---

现场示例（基本）：

---

实时示例（垂直对齐>600px）

仅使用

高度

属性，您可以使用一组MediaQuery获得此行为

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%);
   }       
}

---

现场示例（基本）：

---

现场示例（垂直对齐>600px）

您可以通过组合

高度

、

最大高度

和

最小高度

以非常简单的方式完成此操作，而无需媒体查询。浏览器在它们之间进行调解

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

编辑-垂直居中

为了包括垂直居中，还有一种不需要媒体查询或CSS转换的智能方法。因此，该解决方案应该在IE8中起作用

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

---

使用垂直对齐。

您可以通过组合

高度

、

最大高度

和

最小高度

以非常简单的方式完成此操作，而无需媒体查询。浏览器在它们之间进行调解

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

编辑-垂直居中

为了包括垂直居中，还有一种不需要媒体查询或CSS转换的智能方法。因此，该解决方案应该在IE8中起作用

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

---

使用垂直对齐。

参见此。在任何宽度和高度的窗口上，都需要100%宽度和100%高度

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

---

看看这个。在任何宽度和高度的窗户上，都需要100%的宽度和100%的高度

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

---

谢谢您的回答。这是我第一次尝试的，但我没有将HTML和BODY设置为100%高度。看来效果不错。你知道如何扩展这个解决方案，使其在窗口内垂直对齐吗？因为这是一个重要的细节，你能在问题中详细说明吗？即使窗户高度<200px，也需要这样做吗？这是一个问题，尽管这是一个额外的要求。我只是想问个问题。通过扩展您的答案@FabrizioCalderan，我成功地垂直对齐了它。干杯，抱歉耽搁了，我得接个电话。有关IE8友好解决方案，请参见编辑。谢谢您的回答。这是我第一次尝试的，但我没有将HTML和BODY设置为100%高度。看来效果不错。你知道如何扩展这个解决方案，使其在窗口内垂直对齐吗？因为这是一个重要的细节，你能在问题中详细说明吗？即使窗户高度<200px，也需要这样做吗？这是一个问题，尽管这是一个额外的要求。我只是想问个问题。通过扩展您的答案@FabrizioCalderan，我成功地垂直对齐了它。干杯，抱歉耽搁了，我得接个电话。请参阅编辑以获得IE8友好的解决方案。回答很好，谢谢。我已经设法将它扩展到垂直对齐。干杯，谢谢。作为参考，我采用了与垂直居中相同的方法，但是我使用了

margintop:-300px

而不是

translateY（-50%）。你的更灵活，但我的就足够了。再次感谢。回答得很好，谢谢。我已经设法将它扩展到垂直对齐。干杯，谢谢。作为参考，我采用了与垂直居中相同的方法，但是我使用了
margintop:-300px
而不是
translateY（-50%）。你的更灵活，但我的就足够了。再次感谢。