如何实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 12:21:581881瀏覽
有没有纯粹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%,不就可以了吗？
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn