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

时间:2016-07-17 20:24:38

标签: javascript html css css3

在我的外部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的高度设置为其值。

2 个答案:

答案 0 :(得分:2)

除了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);
}

答案 1 :(得分:0)

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