左侧菜单内容过多,移动滚动条时,不能撑满整个页面。
采用了网上的的方法:
CSS
html 和body 的height设为100%
左侧菜单.sidebar{
position :absolute;
height:100%;
min-height:100%;
}
请问有没有什么更好的方法可以解决此问题?
左侧菜单内容过多,移动滚动条时,不能撑满整个页面。
采用了网上的的方法:
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% 其实没有什么用了, 如果不是考虑兼容性的话。
.sidebar {
position: fixed;
height: 100%;
}
height
100%意味着和body的高度一样,body的高度是视口的高度,右边内容区超出视口时,当然sidebar会不够高。直接设为fixed,sidebar的滚动条放在sidebar里面不是更符合要求?何必要absolute呢
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
3 回答1.4k 阅读✓ 已解决
2 回答2.5k 阅读✓ 已解决
2 回答1.9k 阅读✓ 已解决
3 回答1.1k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
max-height:100%如果sidebar和内容如果不同步滚动可以加上;
或者你可以考虑一下远古的解决方案
PS:下回记得贴DOM结构;不然没法写CSS帮你~
PS:body的height在chrome里面不是整屏高,是根据内容填充"撑"大的,可能是因为chrome系列都有硬件加速,给用户省一点资源吧;