固定標題下方的固定導航欄

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