我有一个包装div，其中包含2个div相邻。在这个容器上面，我有一个包含我的标题的div。包装器div必须是100%减去标题的高度。头部大约是60像素。这是固定的。我的问题是，如何设置包装器div的高度为100% - 60px ?
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
当前回答
在这个例子中，你可以识别不同的区域:
<html>
<style>
#divContainer {
width: 100%;
height: 100%;
}
#divHeader {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 28px;
background-color:blue;
}
#divContentArea {
position: absolute;
left: 0px;
top: 30px;
right: 0px;
bottom: 30px;
}
#divContentLeft {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
bottom: 0px;
background-color:red;
}
#divContentCenter {
position: absolute;
top: 0px;
left: 200px;
bottom: 0px;
right:200px;
background-color:yellow;
}
#divContentRight {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width:200px;
background-color:red;
}
#divFooter {
position: absolute;
height: 28px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:blue;
}
</style>
<body >
<div id="divContainer">
<div id="divHeader"> top
</div>
<div id="divContentArea">
<div id="divContentLeft">left
</div>
<div id="divContentCenter">center
</div>
<div id="divContentRight">right
</div>
</div>
<div id="divFooter">bottom
</div>
</div>
</body>
</html>
其他回答
你可以这样做:height: calc(100% - nPx);例如height: calc(100% - 70px);
伟大的……现在我已经不再使用% he he he…除了如下所示的主容器:
<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;
}
我在所有已知的浏览器中测试了这个功能，效果很好。使用这种方式有什么缺点吗?
div {
height: 100%;
height: -webkit-calc(100% - 60px);
height: -moz-calc(100% - 60px);
height: calc(100% - 60px);
}
在少用的同时确保
height: ~calc(100% - 60px);
否则less是无法正确编译的
在CSS3中你可以使用
height: calc(100% - 60px);
我还没有看到这样的帖子，但我想我应该把它放在那里。
<div class="main">
<header>Header</header>
<div class="content">Content</div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.main {
height: 100%;
padding-top: 50px;
box-sizing: border-box;
}
header {
height: 50px;
margin-top: -50px;
width: 100%;
background-color: #5078a5;
}
.content {
height: 100%;
background-color: #999999;
}
这是一个工作的jsfiddle
注意:我不知道浏览器的兼容性是什么。我只是在玩其他的解决方案，这似乎很有效。
