在 CSS 中混合相对大小和绝对大小答案

【问题标题】：Mixing relative and absolute sizes in CSS在 CSS 中混合相对大小和绝对大小
【发布时间】：2012-02-11 23:31:10
【问题描述】：

我有一个关于一个问题的问题，我最初认为这个问题很容易解决。但显然它不是 - 至少不是只有 CSS。

这是基本情况：

<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
  <div id="top" style="margin:5px;width:400px;background:#ffffff;">
  </div>
  <div id="content" style="margin:5px;width:400px;background:#ffffff;">
  </div>
</div>

我有一个占满屏幕高度 90% 的包装 div 和两个内部 div。第一个 div“顶部”包含一些不同的元素。第二个 div“内容”应该填充包装 div 的剩余空间。

到目前为止，我还没有找到一种方法来设置 div “内容”以填充剩余空间 - 即使我知道 div “顶部”的确切高度，因为我只知道相对高度包装div。

因此，我很乐意学习一种方法来填充 div“内容”以填充剩余空间或如何混合相对和绝对大小（即高度：100%-100px）。

【问题讨论】：

标签： html css

【解决方案1】：

目前没有跨浏览器解决方案来实现您正在尝试使用div 元素和 CSS。但是，您可以通过使用 table 的可靠方法获得您想要的行为。

<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>

<body>
<table id="wrapper" role="presentation">
  <tr>
    <td id="top">Top</td>
  </tr>
  <tr>
    <td id="content">Content</td>
  </tr>
</table>
</body>
</html>

编辑：

看来我的回答激起了一大群黄蜂。似乎有近乎宗教信仰的人说使用表格进行布局是不好的。在许多情况下，这是绝对正确的，但是there are situations where a table will do what CSS cannot。这是其中一种情况，其中一种 CSS 替代方案即将出现，但大多数浏览器还不支持它。由网站设计者决定是现在使用具有跨浏览器功能的布局，还是使用纯 CSS 布局，但其局限性可能会在未来变得更容易维护。

【讨论】：

永远不要使用表格进行布局。
那就提供一个跨浏览器解决这个问题，不使用表。
@Feysal - 如果您真的必须使用表格来实现基本的跨浏览器效果，您至少可以缓解它的问题。 cellspacing 和 cellpadding，在下一个 HTML 版本中已经过时，当然可以用 CSS 代替，在表格元素中添加 role="presentation" 将阻止表格在现代屏幕阅读器中被称为表格，消除使用的最具破坏性的影响用于布局的表格。
很好。 border-spacing 和 padding 可以很好地替换这些表格属性，并添加对屏幕阅读器的支持，虽然并不总是必要的，但没有什么害处。

【解决方案2】：

你的 HTML 代码真的错了：

属性后不要使用逗号
不要使用内联 CSS，将所有 CSS 放在一个样式表中，然后将样式表加载到您的 HTML 页面中
CSS 语法是：propertie: value; 示例：width: 10px; 不是：width=10px

要使用 100% - 100px，您可以使用 CSS3 calc，但此功能有 less browser support。你可以用 JS 来做一个计算函数。

【讨论】：

感谢您的输入 - 我更正了语法拼写错误（实际代码显然没有它们；它也有自己的 css 文件，但对于一个迷你示例，我认为它会更清楚把它们放在html标签旁边）
为什么这个答案是-1？我写了一篇“非常草率、不费吹灰之力的帖子”吗？还是一个“明显不正确且可能很危险”的答案？

【解决方案3】：

没有跨浏览器的方法可以让内容 div 用 CSS 填充所有可用空间，但很容易让事情看起来像这样：

<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="top">
    Top
  </div>
  <div id="content">
    Content
  </div>
</div>
</body>
</html>

这对于大多数情况应该足够了，除非您想在内容上使用类似 onmouseover 的处理程序。

【讨论】：

感谢您的解决方案。但是，“除非”你说自己是你不能做的事情。此外，您不能让边框透明以显示所有这些 div 下方的内容（透明边框只会显示 div）。
边框不透明，它们设置为与您问题中的包装背景相同的灰色调，以产生所需的视觉效果。
是的，当然。我的意思是：如果我在示例中改用透明包装器，那么您的解决方案将不再有效。