固定标题下方的固定导航栏

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

如果要在相对于视口的position: fixed固定元素，则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/

也可以在这里查看我的两个答案：

位置固定在容器元素中，而不是浏览器/视口中

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

始终通过W3C标记验证服务运行代码，以检查错误和标准合规性。

希望这可以帮助。 祝好运！

固定标题下方的固定导航栏

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-09 04:00:57

固定标题下方的固定导航栏

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-09 04:00:57

解决方案1
1 已采纳 2015-08-09 04:00:57