在我的外部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的高度设置为其值。
答案 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()
,它的工作方式相同。它与父母的身高/宽度有关。所以你可以这样做:
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
,高度将取决于内容。尝试将越来越多的内容/文本/图像放入其中 - 它将长大到最大高度值,之后会出现一个滚动条。