大佬教程收集整理的这篇文章主要介绍了仅使用CSS填写剩余的div高度,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望不使用Javascript这样做.
是不是只有CSS解决方案?也许通过利用display:table / display:table-cell或display:flex?
非工作的例子
<!DOCTYPE html> <html> <head> <title>Stretch</title> <style type="text/css"> html { height: 100%; } body { padding: 0 0; margin: 0 0; height: 100%; BACkground: grey; } #container { BACkground: pink; } #autoHeight { BACkground: blue; } #remainingHeight { BACkground: green; } </style> </head> <body> <div id="container"> <div id="autoHeight">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="remainingHeight">This div should fill out the rest,making the display mainly green. And no,I don't mean to just have green BACkground. It will contain other things.</div> </div> </body> </html>@H_674_11@
http://cssdeck.com/labs/elars8pj
html { height: 100%; } body { padding:0 0; margin:0 0; height: 100%; BACkground:grey; } #container { display:table; height:100%; width:100%; BACkground:pink; } #autoHeight { display:table-row; BACkground:blue; } #remainingHeight { display:table-row; height:100%; BACkground:green; }@H_674_11@
以上是大佬教程为你收集整理的仅使用CSS填写剩余的div高度全部内容,希望文章能够帮你解决仅使用CSS填写剩余的div高度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。