固定Div - 内容滚动落后

时间:2013-03-14 20:11:05

标签: css html fixed

我将此表放在页面顶部...

<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed; z-index:99999;">
  <tr>
    <td><a href="index.php"><img src="logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
</table>

它始终位于页面顶部但是当向下滚动时,页面上的所有内容都会排在桌面后面,您可以在后面看到它

有谁知道我能做些什么来阻止这种情况发生?

编辑: 这是我的完整代码...

<style type="text/css">
body,html {
    height:100%;
}
#top-bar {
    width:100%;
    padding:10px 10px 80px 10px;
    margin:0 0 100px 0;
    border-bottom:solid 1px #000000;
    top:0;
    left:0;
}
#left-bar {
    width:170px;
    display:inline;
    float:left;
}
#right-bar {
    width:80%;
    display:inline;
    float:right;
}
</style>
</head>

<body>
<div id="top-bar">
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed">
  <tr>
    <td><a href="index.php"><img src="logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
</table>
</div>

<div id="left-bar"><iframe src="header.php" width="180px" height="100%" frameborder="0" scrolling="no"></iframe></div>

<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</div>

</body>

1 个答案:

答案 0 :(得分:1)

你很可能正在寻找这个:

<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
  <tr>
    <td><a href="index.php"><img src="logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
</table>

background-color确保您看不到桌子后面的任何内容。

JsFiddle:http://jsfiddle.net/CRHxk/