Question

基本上我拥有的是3个div。顶部，中部，底部。顶部高度为60px; 底部高度为60px; 我希望中间是顶部和底部之间的高度。我尝试使用height: 100%;，但它似乎无法正常工作。

如果我设置.middle的高度，它就不会做任何事情。如果我决定在其上加height : 10px;或填充它会出现某种原因。

HTML code：

＆＃13;

html,
body{
    height:100%;
	background-color: #181818;
	margin: 0 auto;
	position: relative;	
}

.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}

.topbanner {
	background-color: #282828;
	display:block;
  height: 76px;
}

.leftbanner {
	background-color: #282828;
	height: 100%;
}

.middlebanner {
	background-color: #181818;
	height: 100%;
	
}

.rightbanner {
	background-color: #282828;
	height: 100%;
}

.bottombanner {
	background-color:#282828;
	height: 60px;
		position: absolute;
	width: 100%;
    bottom: 0px;
    left: 0;
}

.middle{
	height: 100%;
}

.row {

}

＆＃13;

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

＆＃13;

Answer 1

calc()可以在那里工作。

height:calc(100% - 120px);

或者你可以找到div：

的位置

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

Answer 2

您可以使用弹性框模型（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%; }尺寸（双关语）。

弹性框模型还可以定义弹性项目（弹性容器的子级的子级是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>

Div高度：2个div之间的100％

3 个答案: