三行无表空间CSS布局，中间行填充剩余空间 [英] Three-row table-less CSS layout with middle-row that fills remaining space
问题描述
我需要的是一个div，基于像素的高度包含3行。顶行具有可变的高度，取决于内容。底行具有固定的高度。中间行填充任何剩余空间。一切都是宽度100％。
What I need is a div with pixel-based height containing 3 rows. The top row has variable height depending on the contents. The bottom row has a fixed height. The middle row fills any remaining space. Everything is width 100%.
我一直在努力构建一个div和基于CSS的布局几个小时，需要我字面上秒做使用表。我尝试了许多方法，包括负底部边距，嵌套div，各种定位，高度设置，显示：表，没有什么让我需要什么。我搜索了这个网站和互联网，刷新了我对液体布局的各种方法的记忆。没有效果。
I've been struggling with constructing a div and CSS-based layout for hours that takes me literally seconds to do using a table. I've tried many approaches including negative bottom margins, nesting divs, various positionings, height settings, display:table, nothing gets me what I need. I've searched this site and the internet, refreshed my memory of the various approaches for liquid layouts. No avail.
我不是特别担心与旧浏览器如IE6的兼容性（此应用程序不是为公共使用）。只是让这个工作在IE8 + FF + Chrome将是巨大的。
I'm not especially worried about compatibility with "old" browsers like IE6 (this app isn't for "public" use). Just getting this to work in IE8+FF+Chrome would be great.
我已经剥离了这个问题，一个下面张贴的例子，以及基于表的布局显示我想要什么。 Sidenote：我喜欢CSS和表格的布局，但有时它只是可笑的长度，我们必须经历，使其工作。
I've stripped the problem to a bare example posted below, along with the table-based layout showing what I want. Sidenote: I love CSS and table-less layout, but, sometimes it just seems ridiculous the lengths we have to go through to make it work.
<!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>
同时，我不能让这停止我的进步，花了太多时间了。我将继续在我的项目中的表布局。
Meanwhile, I couldn't let this stop my progress, spent too much time already. I'm going ahead with the table layout in my project. It's simple and fully satisfies the requirements, even if the purists are wailing somewhere.
感谢任何建议，但我主要是好奇什么正确的解决方案是在这一点，我讨厌被骗。
Thanks for any suggestions though - I'm mainly curious what the "right" solution is at this point, I hate being stumped. Surely, it's doable?
推荐答案
你的问题的关键是不同的看待问题 - 如果你的Google粘贴页脚您会发现以下解决方案：
The key to your problem is looking at the problem differently -- if you Google "sticky footer" you'll find solutions like the following:
<!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>
编辑：这里应该是你想要的，或多或少。
there, this should be what you want, more or less.
这篇关于三行无表空间CSS布局，中间行填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
