我需要的是一个基于像素的高度包含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 {} …css ×1