未在折叠下呈现的元素

我有一个垂直导航栏，该页面应该位于页面的整个高度。在没有滚动的小页面上，但是一旦我向下滚动，我就可以看到滚动条正好在折叠的上方结束，并且在滚动后不会继续。该CSS是：未在折叠下呈现的元素

.top-bar { 
    width: 80px; 
    min-width: 0; 
    background: url(../img/grad-overlay-hz.png) #292929; 
    float: left; 
    height: auto; 
    min-height: 100% !important; 
    border: none; 
    border-right: 1px solid #515151; 
    margin: 0; 
    padding: 0; 
}

来源

2012-03-08 Alex N

那么酒吧应该是整个页面的高度（事件在折叠区域下面）还是浏览器窗口？ – evasilchenko 2012-03-08 20:06:08

页面的整个高度，即窗口的高度是问题;）。 – 2012-03-08 20:13:12

什么样的HTML看起来像导航位置？你有没有尝试将身高和html标签的min-height设置为100％？ – evasilchenko 2012-03-08 20:17:22

我认为你应该使用的位置：固定属性。这会将导航栏始终保存在视口中。

.top-bar { 
    width: 80px; 
    min-width: 0; 
    background-color: #292929; 
    position: fixed; 
    height: 100%; 
    border: none; 
    border-right: 1px solid #515151; 
    margin: 0; 
    padding: 0; 
}

来源

2012-03-08 20:14:58 koenpeters

这对我很有用，但导航图标非常大，整个酒吧的高度几乎为800px，因此小屏幕上或平板电脑/手机上的用户永远不会看到所有导航元素。 – 2012-03-08 20:56:17

这是正确的。同样位置：固定在移动设备上不能很好地工作。所以我认为你最好不要使用它。截止效应已知，但我不记得目前的修复。以下是您可能需要阅读的解释：http://delvauxkoen.blogspot.com/2010/01/common-css-bug-with-viewport-scrolling.html – koenpeters 2012-03-08 20:58:32

您可以尝试使用媒体查询调整内容大小，同时保持固定。 – 2012-03-09 01:09:23

未在折叠下呈现的元素

回答

相关问题