CSS如何设置div高度100%减去nPx

我有一个包装div,它将两个div相邻.在这个容器上方,我有一个包含我标题的div.包装div必须是100%减去标题的高度.标题约为60像素.这是固定的.所以我的问题是:如何设置我的包装div的高度为100%减去60 px？

libjup.. 258

在CSS3中你可以使用

height: calc(100% - 60px);

确保" - "符号前后有空格.Firefox需要在" - "符号前有空格. (22认同)

完善.我不知道CSS3可以做到这一点. (7认同)

这太棒了!谢谢......解决了我的问题. (2认同)

Alsciende.. 78

这是一个工作的CSS,在Firefox/IE7/Safari/Chrome/Opera下测试.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y"未经w3c批准,但每个主流浏览器都支持它.如果内容太高,你的两个div #left和#right将显示一个垂直滚动条.

为了在IE7下工作,您必须通过添加DOCTYPE来触发符合标准的模式:

  
high content
  

height: calc(100% - 60px);

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

  
high content
  

position: absolute;
top: 60px;
bottom: 0px;

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}