html - 位置 : fixed on left push content

Question

所以我的网站左侧有一个导航栏，它工作正常，但它不会像普通数据那样“插入”页脚

#navbar {
    float:left;
    width: 181px;
    position: fixed;
    height: 100%;
}
#footer {
   border-top:2px solid #a1a1a1;
   position:absolute;
   bottom:0;
   width:100%;
   color:white;
   height:60px;   /* Height of the footer */
   background-color: #101010;
}

这是 css，您可以在以下位置看到“工作”版本:

version - no data

version - with data

通过第二个链接，您会注意到主要内容是如何推送数据的，但是在第一个链接中，如果您的屏幕很小或窗口很小，它不会显示所有导航栏，有没有办法解决这个问题？ 我相信我已经涵盖了一切

Answer 1

如果我正确理解您的问题，当页面垂直调整大小时，您希望页脚在到达 navbar 时停止。

一种可能的解决方案是像下面这样修改 .navbar css:

#navbar {

  // remove these styles
  // float: left;
  // position: fixed; 
  // height: 100%; 

  width: 181px; // keep this
 }

要让页脚停留在导航的底部，您需要让 .navbar 回到文档流中，float: 和 position : fixed 将其从文档流中取出。

您仍然可能希望将此 float:left 作为您设计的一部分，在这种情况下，您将需要其他东西来向下延伸以停止页脚(可能是 中的东西)内容部分)。