设置100%高度减去另外两个DIVs
设置100%高度减去另外两个DIVs
提问于 2013-09-26 19:05:10
我有以下jsFiddle：http://jsfiddle.net/YT5vt/
我希望第二个DIV (div2)的高度总是100%，但是减去第一个和第三个DIV。当浏览器被调整大小时，只有第二个DIV会被调整大小。
这也是代码
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>CSS
*{
margin: 0;
padding: 0;
}
body, html{
width:100%;
height: 100%;
}
.div1{
width: 100%;
background: #F00;
height: 100px;
}
.div2{
width: 100%;
background: #FF0;
height: 100%;
}
.div3{
width: 100%;
background: #00F;
height: 25px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-26 19:08:44
只需使用CSS3 calc()函数：
.div2{
width: 100%;
background: #FF0;
height: -webkit-calc(100% - 125px);
height: -moz-calc(100% - 125px);
height: calc(100% - 125px);
}但是，如果浏览器不识别函数，则可能需要使用基于JS的回退。大约73%的用户支持calc() -- 来源。
http://jsfiddle.net/teddyrised/YT5vt/2/
一个稍微复杂一些的基于JS(具体来说，基于jQuery的)的退路是：
$(window).resize(function() {
$(".div2").height($(window).height() - $(".div1").height() - $(".div3").height());
}).resize();
// Resize is fired first when the document is ready,
// and then again when the window is resizedhttp://jsfiddle.net/teddyrised/YT5vt/5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19036547
复制相关文章
相似问题
腾讯云开发者
