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 に突き合わせるように移動して、その下に予備のスペースが表示されるようにしたいと考えています。

これを達成するために考えられることはすべて試しましたが、失敗しました。div.fields を table.listhead でラップすることを考えましたが、何も動作しませんでした。

それは可能ですか？

ありがとう。イアン

4

1 に答える 1