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静态侧导航栏

1 个答案: