如何实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度

huwji_stanley_apple 2013-03-17 10:30:33

有没有纯粹div+css的方式实现上下两个div满足：上面的div根据内容自动高度，下面的div自动铺满剩余高度

...全文

1795 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

ppmmwozuiai 2015-01-15

打赏
举报

引用 2 楼 shn11160 的回复:

我也想知道，等高手作答！

这个我试了一下，布局上实现了。但是有个问题，如果inner2的内容很多。那么inner2的高度将超过container的高度显示起来效果类似设置了overflow：hidden的效果

mmqw 2013-06-14

打赏
举报

直接将width和hight设置成100%,不就可以了吗？

huwji_stanley_apple 2013-06-05

打赏
举报

引用 4 楼 oxfed 的回复:

没明白。这个剩余的高度是相对哪个来说的呢？上下的两个div是兄弟元素节点关系吗？

剩余高度是相对父容器而言；是兄弟节点关系；

oxfed 2013-03-22

打赏
举报

没明白。这个剩余的高度是相对哪个来说的呢？上下的两个div是兄弟元素节点关系吗？

云水千寻 2013-03-22

打赏
举报

CSS3中的弹性盒模型可以纯粹使用div+css实现你要的效果。如：


<!doctype html>
<html>
	<head>
		<title>Temp Web Page</title>
		<style type="text/css">
			body *{border:1px solid}
			
			#container{ width:200px; height:400px;
			    display: -moz-box;
				display:-webkit-flex; 
				display: -ms-flexbox;
				
				-moz-box-orient: vertical;
				-webkit-flex-direction:column;
				-ms-flex-direction:column;
			}

			#inner1{ background:#ddd; }
			
			#inner2{  background:#aaa; 
			    -moz-box-flex: 1;
			    -webkit-flex:1;
				-ms-flex:1;
			}
		</style>		
	</head>
	<body>
		<div id="container">
			<div id="inner1">
			When you come to the end of a perfect day. It can only mean a tired heart, and the dear friends have to part.
			</div>
			<div id="inner2"></div>
		</div>
	</body>
</html>

目前支持的浏览器有IE10和较新版本的FireFox、Chrome等。

云水千寻 2013-03-17