如何实现:上面的div根据内容自动高度,下面的div自动铺满剩余高度_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:21:58
原创
2065人浏览过

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


回复讨论(解决方案)

我也想知道,等高手作答!

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等。



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

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

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

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

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号