Question

div自动适应页面高度，多出部分出现滚动条

我的需求是，用了一个div作为左侧的菜单栏，想要div菜单栏的高度始终填满网页的高度。但是如果菜单栏里的内容高出网页的高度，那么就出现滚动条。如果有什么不明白的，请hi我，紧急需求，请大家指教帮助，多谢
其实，用js也行。就是想做出像天涯社区左侧菜单栏的效果。左侧菜单栏始终固定，并且充满页面。若里面的菜单项过多，就出现滚蛋条。

Answer 1

1、首先打开hbuilder编辑器，新建一个html文件，里面写入10个列表：

2、接下来设置列表的样式，在上方的style标签中先设置ul标签的高度和宽度，并设置overflow-x属性为隐藏，这样横向的滚动条就隐藏了，overflow-y属性设置为滚动，纵向的滚动条就显示出来了，最后设置li标签，给它一个较高的高度，让li标签超出ul的高度范围就可以了：

3、最后打开浏览器，就能看到带滚动条的菜单了：

Answer 2

这个问题光用css和html的确是解决不了的，但是并不是像2楼所说的那样丢给后端了，作为一个合格的前端工作者，不要推卸责任，这种问题属于我们前端的。
下面给你说下解题方案：
1、js监测浏览器高度（见下winHeight）和div菜单栏高度（offsetHeight，你可以去百度搜下用法）；
2、当div菜单栏高度小于浏览器高度时，把浏览器高度赋值给div菜单栏高度；当div菜单栏高度大于等于浏览器高度时，div菜单栏高度自适应。

浏览器高度：
var winHeight = 0;//winHeight即浏览器高度
if (window.innerHeight)
{
winHeight = window.innerHeight;
}else if ((document.body) && (document.body.clientHeight))
{
winHeight = document.body.clientHeight;
}
if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
}

追问

通过你的回答，感觉你好像知道我说的意思，能不能给一下详细的js代码，及调用。多谢

追答

好吧，源生的js的确有点多，jq写的确会缩减代码量

var winHeight = $(window).height();//winHeight即浏览器高度
var menuHeight = $("#menu_div").offsetHeight;//菜单高度;其中menu_div为菜单所在标签的id
if(menuHeight=winHeight){
$("#menu_div").css("height",auto);
}

Answer 3

这个css解答不了，因为高度写100%是无效的或者说是不兼容的

Answer 4

没有那么麻烦， 你直接大概的量一下浏览器的高度， 然后给这个DIV 写个高度 然后写，overflow-y:auto
楼主应该是这个意思， 你先试试， 看是不是你要的结果

追问

这样不行，我的意思是用div做的菜单的高度始终填满浏览器的高度。无论div的高度是低于浏览器的高度，还是高于浏览器的高度，都填满。如果高于浏览器的高度，就出现滚动条。这样做出的div菜单，给人的感觉是始终固定。

追答

$(document).ready(function(){
var height = $(window).height(); // 浏览器的高度
$(".box").height(height) // 浏览器的高度加在类名为box的DIV 上
})
有了高度你就可以加，overflow-y:auto 就可以有滚动条了
这个我用JQ写。 你如果要用的话， 记得下载JQ库，

追问

按照你的方法试了一下，怎么不行呢？方便Q下吗。请教一下，我QQ：303511466

Answer 5

mark