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

HTML 静态侧边导航栏

HTML static side navbar

html

css

navigation

sidebar