0

我有一个具有以下结构的页面：

<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/coachmaster.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="dashboard.js"></script>
</head>
<body>
<div id="outer">
  <div id="wrap1">
    <img id="logo" src="/images/dashboard.png" />
    <div id="status">Status</div>
    <div id="menu">Menu</div>
  </div>
  <div id="grip1" ></div>
  <div id="wrap2">
    <div id="content">
      <table class="title"><tr><td>Ian's Dashboard</td></tr></table>
      <div class="fields">This is the screen content
      </div>
      <table class="listhead"><tr>.. row of command buttons... </tr></table>
    </div>
  </div>
</div>
</body>
</html>

关键的 CSS 片段是：

div.fields {
  position: absolute;
  top: 32px;  bottom: 36px;
  width: 99.8%;
  overflow-y: scroll;
  border-right:1px solid #d3d1d1;
  border-left:1px solid #d3d1d1;
}
table.listhead {
  position: fixed;
  bottom: 0;
  width: 100%;
}

这意味着 .listhead 表始终位于屏幕底部，当 div.fields 变得太大而无法提供可用空间时，会出现一个垂直滚动条。

客户希望 table.listhead 向上移动以与 div.fields 对接，以便任何空闲空间出现在其下方。

我已经尝试了我能想到的一切来实现这一目标，但失败了。我想知道用 table.listhead 包装 div.fields，但我什么也做不了。

甚至可能吗？

谢谢。伊恩

4

1 回答 1

0

现在更容易理解了，谢谢！:)

我会尝试使用位置，我可以通过执行以下操作将底桌向上移动：

table.listhead {
  position:relative;
  top: 285px;
}
于 2013-08-20T21:09:50.730 回答