让一个 div 占据剩余屏幕空间的高度

33 浏览
0 Comments

让一个 div 占据剩余屏幕空间的高度

我正在开发一个网络应用程序，希望内容填满整个屏幕的高度。

该页面有一个包含标志和账户信息的头部，其高度可以是任意的。我希望内容div能填满余下的页面到底部。

我有一个头部div和一个内容div。目前我正在使用表格进行布局，如下所示：

CSS和HTML

#page {
    height: 100%; width: 100%
}
#tdcontent {
    height: 100%;
}
#content {
    overflow: auto; /* or overflow: hidden; */
}

 

...
... 




页面的整个高度都被填满，不需要滚动。


对于内容div内的任何内容，将top:0;设置为将其放置在导航栏的下方。有时内容将是一个真正的表格，其高度设置为100%。将头部放在内容中将不允许此功能正常工作。


有没有一种方法可以在不使用表格的情况下实现相同的效果？


更新：


内容div内的元素也将设置为百分比的高度。因此，在div内部的100%内容将填充到底部。两个元素在50%时也是如此。


更新2：


例如，如果头部占屏幕高度的20％，则在#content内指定的50％表格将占用屏幕空间的40％。到目前为止，将整个内容包装在表格中是唯一有效的方式。

								
admin 更改状态以发布 2023年5月20日
							

							

															

						

						
0

					

				


			


			
			

	

		

			

				2
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
在CSS中，真的没有一种可靠的跨浏览器方法来实现这个。假设你的布局复杂，你需要使用JavaScript来设置元素的高度。你需要做的实质就是：




Element Height = Viewport height - element.offset.top - desired bottom margin





一旦你可以得到这个值并设置元素的高度，你需要将事件处理程序附加到窗口的onload和onresize，这样你就可以触发调整大小的功能。


另外，假设你的内容可能大于视口，你需要将overflow-y设置为滚动。

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
2015 更新: flexbox方法


有两个其他的答案简要提到了flexbox; 然而，那是两年多以前的事了，它们没有提供任何例子。现在flexbox的规格已经安定了。




注意: 虽然CSS灵活盒布局规格处于候选推荐阶段，但并非所有浏览器都实现了该规格。WebKit实现必须加上前缀-webkit-; 之前的Internet Explorer实现了旧版本的规格，带有-ms-前缀; Opera 12.10实现了最新版本的规格，没有前缀。查看每个属性的兼容性表以获取最新的兼容性状态。


(摘自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)




所有主要浏览器和IE11+都支持Flexbox。对于IE10或更早的版本，您可以使用FlexieJS shim。


您还可以在此处查看当前的支持情况:

http://caniuse.com/#feat=flexbox


工作示例


使用flexbox，您可以轻松地在任何行或列之间切换，无论其是具有固定维度、按内容大小调整维度还是剩余空间维度。在我的例子中，我已经设置标题根据其内容自适应大小（根据OP的问题），我添加了一个底部展示如何添加固定高度区域，然后将内容区域设置为填满剩余空间。



html,
body {
  height: 100%;
  margin: 0;
}
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.box .row {
  border: 1px dotted grey;
}
.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}
.box .row.content {
  flex: 1 1 auto;
}
.box .row.footer {
  flex: 0 1 40px;
}




    



    
header
      
      (sized to content)

    

      content
      (fills remaining space)
    

    
footer (fixed height)








在上面的CSS中，flex 属性缩写了 flex-grow、flex-shrink 和 flex-basis 属性，以确定 flex 项目的灵活性。Mozilla 有一个关于弹性盒模型的很好的介绍。

									

				

									

			

			
0