HTML靜態側導航欄

Question

我該如何修復靜態右側導航欄？如果這是一個普遍問題，我很抱歉。基本上，我正在嘗試使用帶有頁眉和頁腳的雙柱風格網站。頁眉，頁腳和佈局全部完成，但是，我無法將邊欄變爲靜態。這裏是我的CSS：

body { 
 
    background-color: black; 
 
    color: #00FE52; 
 
    font-size: 14px; 
 
} 
 
#header { 
 
    position: fixed; 
 
    background-color: black; 
 
    color: #00FE52; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida  Typewriter', monospace; 
 
    font-size: 28px; 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 
#content { 
 
    padding-top: 80px; 
 
    float: left; 
 
    width: 80%; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
 
} 
 
#navbar { 
 
    position: fixed; 
 
    padding-top: 80px; 
 
    padding: 80%; 
 
    float: left; 
 
    height: (100% - 80px); 
 
    width: 20%; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    background-color: black; 
 
    text-align: center; 
 
    color: #00FE52; 
 
    font-size: 14px; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    height: 30px; 
 
    width: 100%; 
 
}

<!-- Header --> 
 
<div id="header" data-position="fixed"> 
 
    <p>Traxitor Development</p> 
 
</div> 
 

 
<!-- Content --> 
 
<div id="content"> 
 
    <p>This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This 
 
    should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should 
 
    show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show 
 
    up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up 
 
    in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in 
 
    on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on 
 
    the left side.</p> 
 

 

 

 

 
</div> 
 

 
<!-- Navigation Bar --> 
 
<div id="navbar"> 
 
    <p>This should show up on the right side</p> 
 

 

 

 
</div> 
 

 
<!-- Footer --> 
 
<div id="footer" data-position="fixed"> 
 
    <p>Traxitor Development - Copyright © 2016 - Theme created by <a href="https://twitter.com/9fiftyfive" style="color:#00FE52;text-decoration:none;">@9fiftyfive</a> 
 
    </p> 
 
</div>

Answer 1

嘗試

#navbar { 
    position: fixed; 
    padding-top: 80px; 
    padding-left: 80%; 
    align: left; 
    color:#FFFFFF; 
    font-size:20px; 
    height: (100% - 80px); 
    width: 20%; 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
    } 

JSFIDDLE LINK