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