Div高度:2个Div之间为100%

Div height: 100% between 2 divs

本文关键字：Div 100% 之间 2个 高度      更新时间：2023-09-26

基本上我有3个div。顶部、中间、底部。顶部的高度为60像素；底部的高度为60px；我希望中间是顶部和底部之间的高度。我试过使用height: 100%;，但似乎不起作用。

如果我设置.middle的高度，它将不会起任何作用。如果我决定在上面放一个height : 10px;或填充，它会因为某种原因出现。

HTML代码：

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 {
}
<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>

您可以使用flex box模型(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元素）在内容增长或收缩时的反应。

最后，通常的免责声明是：对flex box的支持有了很大的改进，但可能不符合您的喜好，请根据您的项目限制评估其可行性。

calc()将在那里工作。

height:calc(100% - 120px);

或者你可以修正div:的位置

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

对于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>

相关文章：