Question

所以我有一个html页面和一个固定的图像作为我的标题，但我想在下面有一个固定的导航栏，我可以有链接到我的服务器上的另一个页面的按钮

这是我的代码

<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
@media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png"       width="1700" height="46" alt="logo"<br>
<p>
  <table>
    <tr>
  <td bgcolor= "black"><a href="http://192.168.0.143" color="cyan"style="text-decoration: none">Server Index</a>&nbsp<a href="http://192.168.0.143/chat.html" style="text-decoration: none">Chat Room</a></td>
   </tr>
 </table>
</p><br>
</div>

Answer 1

如果要修复与视口相关的元素，那么CSS position: fixed属性是正确的方法。

这可能就是您要做的事情：http://jsfiddle.net/hh1kuxyh/

当您向上和向下滚动时，您会注意到标题和导航栏保持不变。

<强> HTML

<div id="container">
    <div id="header"><h2>HEADER IMAGE</h2></div>
    <div id="navbar"><span>NAVIGATION MENU</span></div>
</div>

<div id="main-content">
    <p>lots of text here</p>
</div><!-- end #main-content -->

<强> CSS

* {
    margin: 0;
    padding: 0;
}

#container {
    width: 98%;
    height: 230px;
    position: fixed;
    top: 0;
}

#header {
    height: 150px;
    background-color: chartreuse;
    text-align: center;
}

#header h2 {
    padding-top: 25px;
}

#navbar {
    height: 75px;
    background-color: #aaa;
    text-align: center;
    border: 2px solid black;
}

#navbar span {
    line-height: 75px;
    font-weight: bold;
}

#main-content {
    margin-top: 235px;
}

如果要修复与其他元素相关的元素，那么您可能需要使用一些jQuery。 http://jsfiddle.net/8086p69z/8/

另见我的两个答案：

Position fixed within container element instead of the browser / viewport

最后，我尝试使用您的代码，但它包含许多错误。例如，您的代码块缺少<html>，<body>和<head>元素。

始终通过W3C Mark-Up Validation Service运行您的代码，以检查错误和标准合规性。

希望这会有所帮助。祝你好运！

修复了固定标题下方的导航栏

1 个答案: