Question

我有三个主要的div - 文章容器，链接容器和页脚。高度如下：

#article-container{min-height:63%; width:100%;}

#other-articles-section{min-height:29%; width:100%;}

#footer{min-height:8%, width:100%;}

＃other-articles-section里面我有两个div并排占据了宽度的近100％。

#link-container-a{
vertical-align:top;
position:relative;
display:inline-block;
background-color: #929193;
min-height:100%;
font-size:.95em;

}

#link-container-b{
vertical-align:top;
color: #FFF;
font-size: 1em;
background-color: #6B6A6C;
display:inline-block;
width: 25%;
min-height:100%;

}

#link-wrapper{
display:inline-block;
width:100%;
min-height:100%;
background-color:#06F;

}

问题在于链接容器a＆amp; b，以及它们的包装器，只扩展到其内容的高度，而不是100％的＃other-articles-section。所有其他div工作得很好。我的身体设置为100％的高度和宽度，我的HTML也是如此。怎么回事？

下面是代码。绿色是＃other-articles-section，蓝色是#link-wrapper。

＆＃13;

body{
  height:100%;
  width:100%;
  }

html{
   height:100%;
  width:100%;
  
  }

#wrapper{
  width:100%;
  height:100%;

  }


#link-container-b {
	vertical-align:top;
	color: #FFF;
	background-color: #6B6A6C;
	display:inline-block;
	width: 25%;
	min-height:100%;
	}

#link-wrapper {
	vertical-align:top;
	display:inline-block;
	width:100%;
	min-height:100%;
	background-color:#06F;

}

#link-container-a {
	vertical-align:top;
	display:inline-block;
	background-color: #929193;
	width: 74%;
	min-height:100%;


	
	
}

#other-articles-section {
	margin-top:0px;
	background-color: #396;
	min-height:29%;
	width:100%;

	
	
}


#footer{
	color:#FFF;
	display:inline-block;
	width:100%;
	background-color: #000;
	min-height:8%;

	
}

#article-container {

background-color: rgba(255,205,255,1.00);
min-height:63%;


}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
  
<body>
  
  
<div id="wrapper">
<div id="article-container">text</div>
  
<div id="other-articles-section">
 
<div id="link-wrapper">
  
<div id="link-container-a">other articles</div>
<div id="link-container-b">more articles</div>
  
 </div>
  </div>

<div id="footer">footer</div>  
  
 </div>
  
 </body>
 </html>

＆＃13;

100％身高29％的儿童身高塌陷

0 个答案: