Div高度：2格之间的100％

Question

基本上我有3格。顶部，中部，底部。 顶部有60px的高度; 底部有60px的高度; 我希望中间是Top和Bottom之间的高度。我尝试了height: 100%;，但它似乎没有工作。

如果我设置的高度为.middle它不会做任何事情。如果我决定放一个height : 10px;或填充它会显示出于某种原因。

HTML代码：

html, 
 
body{ 
 
    height:100%; 
 
\t background-color: #181818; 
 
\t margin: 0 auto; 
 
\t position: relative; \t 
 
} 
 

 
.nopadding { 
 
\t padding: 0 !important; 
 
\t margin: 0 !important; 
 
} 
 

 
.topbanner { 
 
\t background-color: #282828; 
 
\t display:block; 
 
    height: 76px; 
 
} 
 

 
.leftbanner { 
 
\t background-color: #282828; 
 
\t height: 100%; 
 
} 
 

 
.middlebanner { 
 
\t background-color: #181818; 
 
\t height: 100%; 
 
\t 
 
} 
 

 
.rightbanner { 
 
\t background-color: #282828; 
 
\t height: 100%; 
 
} 
 

 
.bottombanner { 
 
\t background-color:#282828; 
 
\t height: 60px; 
 
\t \t position: absolute; 
 
\t width: 100%; 
 
    bottom: 0px; 
 
    left: 0; 
 
} 
 

 
.middle{ 
 
\t height: 100%; 
 
} 
 

 
.row { 
 

 
}

<div class="container-fluid"> 
 
\t \t <div class="top" id="header"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="topbanner"> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="middle" id="middle"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-2 nopadding"> 
 
\t \t \t \t \t <div class="leftbanner"> 
 
\t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-8 nopadding"> 
 
\t \t \t \t \t <div class="middlebanner"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 nopadding"> 
 
\t \t \t \t \t <div class="rightbanner"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="bottom" id="footer"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="bottombanner"> 
 
\t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

calc()将在那里工作。

height:calc(100% - 120px); 

或者你可以fix'ed该专区位置：

div { 
    position:fixed; 
    right:0; left:0; 
    bottom:60px; 
    top:60px; 
} 

Answer 2

你可以使用Flex盒模型（https://www.w3.org/TR/css-flexbox/），这是排序的旨在解决您要的那种问题解决：

.container-fluid { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.top, .bottom { 
    height: 60px; 
} 

.middle { 
    height: 100%; 
} 

只要记住，body和html最初有自动高度，所以即使你的.container-fluid指定height: 100%，它将不得不在最初“紧凑”的文档主体的实际高度内，就像html元件一样。尝试html, body { height: 100%; }大小（双关语意）。

柔性盒模型还为您提供了可能性来定义你的Flex项目（一柔性容器这与display: flex最近的父的孩子，在这种情况下.container-fluid元素）如何作出反应，它们的内容增大或缩小。

最后，通常的免责声明：支持弹性盒大大改进，但可能不符合您的喜好，根据您的项目限制评估其可行性。

Answer 3

与Flex模型，flex:1;是你可能想知道的规则：

例如用一个简单的模板（饲料每一件与你的内容和自己的样式）

html, 
 
body { 
 
    height: 100%; 
 
    background-color: #181818; 
 
    margin: 0 auto; 
 
    color:white; 
 
} 
 
header, 
 
footer, 
 
aside { 
 
    background: #282828 
 
} 
 
/* layout */ 
 

 
body, 
 
main { 
 
    display: flex; 
 
    flex: 1; 
 
    /* should show a scrollbar ? if yes then */ 
 
    overflow:auto; 
 
} 
 
body { 
 
    flex-flow: column; 
 
} 
 
header, 
 
footer { 
 
    min-height: 60px; 
 
    /* height: 60px; or 
 
    whatever, but it can just grow from content if you wish without height nor min-height*/ 
 
} 
 
section { 
 
    width: 75%; 
 
    height: 100%; 
 
} 
 
aside { 
 
    flex: 1; 
 
} 
 

 
/* see me **/ 
 
* {box-shadow: 0 0 0 1px;}

<header>your head stuff here</header> 
 
<main> 
 
    <aside> 
 
    on left 
 
    </aside> 
 
    <section> 
 
    on middle 
 
    </section> 
 
    <aside> 
 
    on right 
 
    </aside> 
 
</main> 
 
<footer> 
 
    footer stuff 
 
</footer>