有一个需要在内容溢出滚动固定位置的div(Have a fixed position div tha

2019-08-31 12:23发布

我有实际上是两个问题,但让我们先解决的首要问题,因为我相信另一种是更容易得到解决。

我有滚动的菜单左侧的固定位置股利。 右侧是一个标准的div滚动正常。 问题是,当浏览器中查看端口太小,看到整个菜单..有没有办法得到它的滚动,我可以找到(至少不是用CSS)。 我在CSS使用不同的溢出尝试,但没有使DIV滚动。 包含菜单的div设置为最小高度:100%和立场:固定..这两个属性我需要保持。

包含该菜单在div是内部的绝对定位和高度设置为100%的另一包装的div。

我怎样才能得到它的垂直滚动,如果内容是在div太高?

这使我其他的问题,我不希望有一个滚动条显示..但我想我可能已经有一个答案了(只有它尚不能工作,因为我不能得到DIV滚动与开始)。

任何解决方案? 也许需要JavaScript的? (其中我知之甚少)

JS小提琴例

而导致此问题的相关代码(因为在这里张贴整件事是waaay太长):

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

也尝试添加身高:100%也只是看看,如果这是一个问题,但它没有工作,要么......也没有一个固定的高度,比如600px的。

Answer 1:

使用问题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/



Answer 2:

这里都是修复。

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

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的高度。 这就是为什么我添加了屏幕高度的媒体查询。 也许是这样的滚动不需要出现,你可以调整你的短屏幕尺寸样式。

干杯,伊格纳西奥



Answer 3:

离开一个答案任何人都希望做同样的事情,但在水平方向上,就像我想。

调整@ 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:autooverflow:scroll



文章来源: Have a fixed position div that needs to scroll if content overflows