具有固定位置的div,如果内容溢出,则需要滚动


150

我实际上有两个问题,但是让我先解决主要问题,因为我认为另一个更容易解决。

我在菜单左侧的滚动条的左侧有一个固定位置的div。右侧是可以正确滚动的标准div。问题是,当浏览器的视口太小而看不到整个菜单时,无法找到我可以找到的滚动方式(至少没有使用CSS)。我试过在CSS中使用不同的溢出,但是没有什么可以使div滚动。包含菜单的div设置为min-height:100%和position:fixed ..这两个属性我都需要保留。

包含菜单的div 位于另一个包装div中,该div绝对定位并且高度设置为100%。

如果内容对于div而言太高,如何使其垂直滚动?

这导致了另一个问题,即我不希望显示滚动条。.但是我想我可能已经对此有了一个答案(只是它不起作用,因为我无法使div滚动。首先)。

有什么办法吗?也许需要JavaScript?(我对此一无所知)

JS小提琴示例

以及引起该问题的相关代码(由于将整个内容发布在这里太长了):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

还尝试添加height:100%只是为了看看是否是一个问题,但是它也不起作用...也没有固定的高度,例如600px。


请发布一个jsfiddle以及您当前正在使用的html和css,以便我们可以看到问题。谢谢!
mchail

3
您是否尝试过溢出:自动;?
2013年

是的overflow:auto或overflow-y:scroll或overflow:scroll全部不允许固定div滚动。
TCD工厂

需要滚动的原因是,div是否在其定义的长度内包含太多内容。如果浏览器视图端口缩小,则无论如何都不会导致div强制执行滚动操作。
2013年

无法发布JSfiddle和html / css,因为它太长了,而且它们不允许您在没有代码的情况下发布JSfiddle链接。:(我只是贴了一段代码,它似乎没有帮助的div滚动..并链接到整个事情。
TCD厂

Answers:


244

使用的问题height:100%是它将占页面的100%,而不是窗口的100%(您可能会希望如此)。这将导致您看到的问题,因为非固定内容的长度足够长,可以包含高度为100%的固定内容,而无需滚动条。浏览器不知道/不在乎您实际上无法向下滚动该栏以查看它

您可以fixed用来完成您想做的事情。

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

您的小提琴的这把叉子显示了我的解决方法:http : //jsfiddle.net/strider820/84AsW/1/


工作了 我需要此来改编Codrops文章。有些人可能还需要使用左和右设置为0。谢谢了很多,运气
圣地亚哥Baigorria

19
如果将“ overflow-y”设置为auto,则当内容在视口内时,滚动条将消失。换句话说,如果它没有溢出,将没有滚动条,而当它溢出时,将有一个滚动条。
火车

正确。我只是使用他的CSS并修复了真正损坏的东西。不过,他似乎已经对他的问题有了答案。
strider820 2014年

3
工作了!很好的解决方案。我仍然不知道底部0 :.您能解释一下吗?
Gianluca Ghettini '16

5
0,而在一个位置固定元件留出高度使浏览器以拉伸元件,使顶部是在0和所述底部是在0:添加顶部:0和底部
strider820

6

这是两个修复程序。

首先,关于固定的侧边栏,需要给它一个溢出的高度:

HTML代码:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

CSS代码:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

实时示例:http//jsfiddle.net/RWxGX/3/

如果您的内容超出了div的高度,那么就不可能没有滚动条。这就是为什么我添加了针对屏幕高度的媒体查询的原因。也许您可以针对较短的屏幕尺寸调整样式,从而无需显示滚动条。

干杯,伊格纳西奥


请参阅我发布的JSFiddle示例。您将看到问题。
TCD Factory

这不适用于较旧的浏览器,例如适用于iOS 4.2的Mobile Safari
mheavers 2013年

4

一般来说,固定部分应与设置widthheight并且topbottom性能,否则将不承认它的大小和位置。

如果使用的框是身体的直接子对象并且具有邻居,则检查z-indextop, left属性是有意义的,因为它们可能彼此重叠,这可能会影响滚动内容时的鼠标悬停。

这是内容框(body标记的直接子元素)的解决方案,该框通常与移动导航一起使用。

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

希望它能对任何人有帮助。谢谢!


3

当我在设计React组件的样式时,这里的解决方案对我不起作用。

虽然对侧边栏起作用的是

.sidebar{
position: sticky;
top: 0;
}

希望这对某人有帮助。


我已经编辑CSS多年了,对“粘性位置”属性一无所知。谢谢您的配合,也非常适合我的实施!
1owk3y

0

给想要做类似但水平方向做某事的人留下答案,就像我想要的那样。

像下面那样调整@ strider820的答案将起到神奇的作用:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

而已。还要检查此注释,其中@train解释overflow:auto了over overflow:scroll

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.