我有实际上是两个问题,但让我们先解决的首要问题,因为我相信另一种是更容易得到解决。
我有滚动的菜单左侧的固定位置股利。 右侧是一个标准的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的。
使用问题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/
这里都是修复。
首先,关于固定侧边栏,你需要给它的高度为它溢出:
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的高度。 这就是为什么我添加了屏幕高度的媒体查询。 也许是这样的滚动不需要出现,你可以调整你的短屏幕尺寸样式。
干杯,伊格纳西奥
离开一个答案任何人都希望做同样的事情,但在水平方向上,就像我想。
调整@ 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
在overflow:scroll
。