首页 > 左侧菜单不能撑满页面

左侧菜单不能撑满页面

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

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

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


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

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

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

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


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


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系列都有硬件加速,给用户省一点资源吧;


父级的height 也是100% 吗?


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


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

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


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

【热门文章】
【热门文章】