Question

我对一个问题有疑问，我原先认为这个问题解决起来相当简单。但显然它不是 - 至少不是只有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>

我有一个包装器div，它填满了屏幕高度的90％和两个内部div。第一个div“top”包含一些不同的元素。第二个div“content”应填写包装div的剩余空间。

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

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

Answer 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布局，其限制可能在将来更容易维护。

Answer 2

你的HTML代码真的错了：

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

要使用100％ - 100px，您可以使用CSS3 calc，但此功能有less browser support。您可以使用JS来创建一种calc函数。

Answer 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处理程序的内容。

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

3 个答案: