位置：固定在左推送内容

所以我要在我的网站，它工作正常左侧的导航栏，但它不会“推”像普通数据的脚注确实位置：固定在左推送内容

#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

与第二个链接，你会发现的主要内容是如何将这些数据推，b UT放在了第一位，如果你有一个小屏幕或使窗口小，它不会显示所有的导航栏的，是有办法解决这一问题？我相信我已经涵盖了一切

来源

2014-01-30 Tom Hancock

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

一个可能的解决方案是修改.navbar CSS象下面这样：

#navbar { 

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

    width: 181px; // keep this 
}

为了得到页脚在导航栏的底部休息，你需要让.navbar回文档流程，float:和position: fixed将其从文档流中取出。

您仍可能希望将此float:left作为您的设计的一部分，在这种情况下，您需要使用其他方法向下延伸以停止页脚（可能是content部分中的内容）。

来源

2014-01-30 04:14:35 badAdviceGuy

我可以很容易地删除这些，但我也仍然希望导航栏保持其位置，以便在长页面上它停留在屏幕上，而不是去到文本的中心 –

@TomHancock我不认为你可以实现你想用纯html和css。你将不得不涉及的JavaScript，因此您可以检查时，侧边栏的底部已达到页脚。有一个称为[置顶侧栏（一堆这样https://www.google.se/search?q=sticky+sidebar&oq=sticky+sidebar&aqs=chrome.0.69i59j69i65j69i60l2j0l2.2186j0j4&sourceid=chrome&espv=210&es_sm=119&ie=UTF-8 ）插件那里。 –

位置：固定在左推送内容

回答

相关问题