如何獲得頁腳，我想它

我有以下結構的網頁：如何獲得頁腳，我想它

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

這有可能嗎？

謝謝。伊恩

來源

2013-08-20 Ian

如果您嘗試進行的jsfiddle與您的代碼，我敢肯定有人可以幫助你更快。乾杯。 – kery

我試圖讓這個問題的jsFiddle。沒有js和圖像丟失 - 請參閱http://jsfiddle.net/rCFng/1/ - 頁腳應該顯示一個圖像，顯示「編輯」。 – Ian

現在有點容易理解了，謝謝！ :)

我會嘗試與位置玩弄，我可以起來做移動下表：

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

來源

2013-08-20 21:09:50 kery

確實，但它不會幫助。 286所需的確切值取決於當前的屏幕深度，因此需要JavaScript。我不想使用JS，如果我可以幫助它。 – Ian

如何獲得頁腳，我想它

回答

相關問題