次の構造のページがあります。
<!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 でラップすることを考えましたが、何も動作しませんでした。
それは可能ですか?
ありがとう。イアン