我需要的是一个基于像素的高度包含3行的div.顶行具有可变高度,具体取决于内容.底行有一个固定的高度.中间行填充任何剩余空间.一切都宽100％.
我一直在努力构建一个基于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>
与此同时,我不能让这阻止我的进步,已经花了太多时间.我正在进行项目中的表格布局.它很简单,完全满足要求,即使纯粹主义者在某个地方哭泣.
感谢您的任何建议 – 我很好奇这个“正确”的解决方案是什么,我讨厌被难倒.当然,这是可行的吗？
解决方法
问题的关键在于以不同的方式查看问题 – 如果您使用Google“粘性页脚”,您将找到以下解决方案：
<!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>
编辑：在那里,这应该是你想要的,或多或少.
