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，在这种情况下，你需要其他东西来向下延伸以停止页脚（可能是content部分中的内容）。

position：固定在左推内容上

1 个答案: