Question

在我的外部css文件中，

#slider {
    width:1200px;
    height:800px;
    margin:0 auto;
}

有效，但

#slider {
    max-width:1200px;
    max-height:800px;
    margin:0 auto;
}

没有。
它给出0高度我是最新的Chrome浏览器。我做错了什么？
-webkit-calc(100% - 100px)或calc(100% - 100px)也不起作用。我猜测css2 / css3属性都没有工作我正在使用的这个html文件是复杂html的一部分，其中包含许多css和javascript。 css2被阻止了还是其他文件中有什么东西？

更新指定最小高度，并将div的高度设置为其值。

Answer 1

除了height: 100%;之外，您还需要应用max-height，这会使其父级的height 100％达到自己的max-height。此外，它只能占用其父级的空间。因此，如果它是body标记的第一个孩子，您可以执行以下操作：

JS Fiddle（例如，宽度/高度较小）

html,
body {
  height: 100%;
  width: 100%;
}

#slider {
  height: 100%;
  max-width: 1200px;
  max-height: 800px;
  margin: 0 auto;
}

要使用calc()，它的工作方式相同。它与父母的身高/宽度有关。所以你可以这样做：

JS Fiddle

html,
body {
  height: 100%;
  width: 100%;
}

#slider {
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
  height: calc(100% - 100px);
  width: calc(100% - 100px);
}

Answer 2

这取决于你想要做什么。但我想目前你在该元素中有 no 内容 - 如果没有定义height，高度将取决于内容。尝试将越来越多的内容/文本/图像放入其中 - 它将长大到最大高度值，之后会出现一个滚动条。

CSS max-height无效，但同一div的高度正常

2 个答案: