Question

我需要的是一个基于像素的高度包含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>

与此同时，我不能让这阻止我的进步，已经花了太多时间。我正在进行项目中的表格布局。它很简单，完全满足要求，即使纯粹主义者在某个地方哭泣。

感谢您提出任何建议 - 我很好奇这个“正确”的解决方案是什么，我讨厌难倒。当然，这是可行的吗？

Answer 1

问题的关键在于以不同的方式查看问题 - 如果您使用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>

编辑：在那里，这应该是你想要的，或多或少。

三行无表格CSS布局，中间行填充剩余空间

1 个答案: