左侧菜单不能撑满页面

Question

左侧菜单内容过多，移动滚动条时，不能撑满整个页面。
采用了网上的的方法：
CSS
html 和body 的height设为100%
左侧菜单.sidebar{

            position :absolute;
            height:100%;
            min-height:100%;
            }

请问有没有什么更好的方法可以解决此问题？

Answer 1

body{display:block;position:relative;height:100%;min-height:100%;max-height:100%;}

max-height:100%如果sidebar和内容如果不同步滚动可以加上;

或者你可以考虑一下远古的解决方案

body{position:relative;overflow:hidden;}
.sidebar{padding-bottom:999em;margin-bottom:-999em;}

PS:下回记得贴DOM结构;不然没法写CSS帮你~
PS:body的height在chrome里面不是整屏高,是根据内容填充"撑"大的,可能是因为chrome系列都有硬件加速,给用户省一点资源吧;

Answer 2

height:100%;指的是浏览器当前可视窗口高度，当然撑不满

Answer 3

父级的height 也是100% 吗?

Answer 4

absolute 是相对最近的父级定位元素， 而height 则是相对于父元素的。
能否撑满整个页面， 就取决于父元素和定位元素。

从图上看， body 可能就是充当了父元素和定位元素。 可以考虑给sidebar 添加下列样式

.sidebar{
    top: 0;
    bottom: 0;
}

另外， 在指定了min-height=100%的情况下， height=100% 其实没有什么用了， 如果不是考虑兼容性的话。

Answer 5

.sidebar {
  position: fixed;
  height: 100%;
}

height 100%意味着和body的高度一样，body的高度是视口的高度，右边内容区超出视口时，当然sidebar会不够高。直接设为fixed，sidebar的滚动条放在sidebar里面不是更符合要求？何必要absolute呢

Answer 6

那你给他一个最小高度是比你屏幕高度值大
height:100%;指的是浏览器当前可视窗口高度，当然撑不满但是浏览器不是实时刷新的

Answer 7

可以参考下阿里云是怎么实现的