2013-08-20 57 views
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,但我没有得到任何工作。

这有可能吗?

谢谢。伊恩

+1

如果您尝试进行的jsfiddle与您的代码,我敢肯定有人可以帮助你更快。干杯。 – kery

+0

我试图让这个问题的jsFiddle。没有js和图像丢失 - 请参阅http://jsfiddle.net/rCFng/1/ - 页脚应该显示一个图像,显示“编辑”。 – Ian

回答

0

现在有点容易理解了,谢谢! :)

我会尝试与位置玩弄,我可以起来做移动下表:

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

确实,但它不会帮助。 286所需的确切值取决于当前的屏幕深度,因此需要JavaScript。我不想使用JS,如果我可以帮助它。 – Ian

相关问题