我有一个包装div,它将两个div相邻.在这个容器上方,我有一个包含我标题的div.包装div必须是100%减去标题的高度.标题约为60像素.这是固定的.所以我的问题是:如何设置我的包装div的高度为100%减去60 px？
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
lib*_*jup 258
在CSS3中你可以使用
height: calc(100% - 60px);
Als*_*nde 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来触发符合标准的模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*{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}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="left"><div style="height:1000px">high content</div></div>
<div id="right"></div>
</div>
</body>Aar*_*lla 47
如果您需要支持IE6,请使用JavaScript以管理包装器div的大小(在读取窗口大小后设置元素的位置(以像素为单位)).如果您不想使用JavaScript,则无法完成此操作.有一些解决方法,但希望一两个星期,使其适用于每种情况和每个浏览器.
对于其他现代浏览器,请使用此css:
position: absolute;
top: 60px;
bottom: 0px;
伟大的...现在我已经停止使用他了他...他除了主容器,如下所示:
<div id="divContainer">
<div id="divHeader">
</div>
<div id="divContentArea">
<div id="divContentLeft">
</div>
<div id="divContentRight">
</div>
</div>
<div id="divFooter">
</div>
</div>
这是css:
#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;
}
我在所有已知的浏览器中测试了这个并且工作正常.使用这种方式有什么缺点吗？
小智 5
div {
height: 100%;
height: -webkit-calc(100% - 60px);
height: -moz-calc(100% - 60px);
height: calc(100% - 60px);
}
确保同时使用较少
height: ~calc(100% - 60px);
否则 less 不会正确编译它
| 归档时间： |
|
| 查看次数： |
198682 次 |
| 最近记录： |