大佬教程收集整理的这篇文章主要介绍了三行无表格CSS布局,中间行填充剩余空间，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我一直在努力构建一个基于div和CSS的布局几个小时,这需要几秒钟才能使用表格.我尝试了很多方法,包括负底边距,嵌套div,各种定位,高度设置,显示：表格,没有什么能让我得到我需要的东西.我搜索了这个网站和互联网,刷新了我对液体布局的各种方法的记忆.徒劳无功.
我并不特别担心与IE6等“旧”浏览器的兼容性(此应用程序不适用于“公共”用途).只是让它在IE8 FF Chrome中工作会很棒.
我已经将问题剥离到下面发布的一个简单示例,以及基于表格的布局显示我想要的内容.旁注：我喜欢CSS和无桌面布局,但是,有时我们必须经历的长度才能让它成功.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .container {width:500px;height:200px;border:1px solid black;BACkground-color:#c0c0c0;position:relative;} /* Styles for colors */ #top td,.top {width:100%;BACkground-color:pink;} #mid td,.mid {width:100%;BACkground-color:lightgreen;border:1px solid red;} #bot td,.bot {width:100%;BACkground-color:lightblue;} /* Styles for Table-based Layout */ #layout {width:100%;height:100%;border-collapse:collapse;} #layout td {vertical-align:top;padding:0px;} #top td {} #mid td {height:100%;} #bot td {height:2em;} /* Styles for Table-less Layout */ .top {} .mid {} .bot {height:2em;position:absolute;bottom:0px;} </style> </head> <body> Layout I want (with tables): <div class="container"> <table id="layout"> <tr id="top"><td>Top:<br/>Content-based<br/>Height</td></tr> <tr id="mid"><td>Middle:<br/>Fill remaining space</td></tr> <tr id="bot"><td>Bottom: Fixed Height</td></tr> </table> </div> <hr/> Best I can get with CSS: <div class="container"> <div class="top">Top:<br/>Content-based<br/>Height</div> <div class="mid">Middle:<br/>Fill remaining space</div> <div class="bot">Bottom: Fixed Height</div> </div> </body> </html>
与此同时,我不能让这阻止我的进步,已经花了太多时间.我正在进行项目中的表格布局.它很简单,完全满足要求,即使纯粹主义者在某个地方哭泣.
感谢您的任何建议 – 我很好奇这个“正确”的解决方案是什么,我讨厌被难倒.当然,这是可行的吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .container {width:500px;height:200px;border:1px solid black;BACkground-color:#c0c0c0;position:relative;} .notbottom2 { min-height: 100%; BACkground-color:lightgreen; width: 100%; height: auto !important; height: 100%; } .mid2 {padding-bottom: 2em;} .top2 { width: 100%; BACkground-color: pink;} .bottom2 { height: 2em; width: 100%; margin-top: -2em; BACkground-color: lightblue; } </style> </head> <body> <div class="container"> <div class="notbottom2"> <div class="top2">Top:<br/>Content-based<br/>Height</div> <div class="mid2">Middle:<br/>Fill remaining space</div> </div> <div class="bottom2">Bottom: Fixed Height</div> </div> </body> </html>
编辑：在那里,这应该是你想要的,或多或少.
以上是大佬教程为你收集整理的三行无表格CSS布局,中间行填充剩余空间全部内容，希望文章能够帮你解决三行无表格CSS布局,中间行填充剩余空间所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。