Question

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

<!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，但我无法得到任何工作。

甚至可能吗？

感谢。伊恩

Answer 1

现在更容易理解，谢谢！：）

我会尝试使用位置，我可以通过以下方式移动底部表格：

table.listhead {
  position:relative;
  top: 285px;
}

如何在我想要的地方获取页脚

1 个答案: