[英]Div background-color doesn't fill the height
I'm struggling with the following. 我正在努力解决以下问题。 My index page is made out of 3 divisions. 我的索引页面由3个分区组成。 A header div (not showing on the screenshot), a menu div (left-side on the screenshot) and a content container div (right-side on the screenshot). 标头div(在屏幕截图中未显示),菜单div(在屏幕截图的左侧)和内容容器div(在屏幕快照的右侧)。
As you can see, the menu divs background doesn't fill the height of the screen vertically. 如您所见,菜单divs背景不会垂直填充屏幕的高度。 This is my code of the menu div. 这是我的菜单div代码。 The div also contains a list but I don't think this is necessary to fix this. div也包含一个列表,但是我认为这不是解决该问题的必要。
#menucontainer {
float:left;
width:200px;
background-color:#dddddd;
position:absolute;
height:100%;
overflow:hidden;
}
Could someone please help me with what I am doing wrong. 有人可以帮我解决我做错的事情。 I think its just a little thing but I can't find it. 我认为这只是一件小事,但我找不到。
Thanks! 谢谢!
Try this : 尝试这个 :
#menucontainer {
position: fixed;
left: 0;
top: 0;
width: 200px;
margin-top: -2.5em;
background-color:#dddddd;
}
#menucontainer {
float:left;
width:200px;
top:0;
left:0;
background-color:#dddddd;
position:absolute;
height:100%;
overflow:hidden;
}
In Javascript : 在Javascript中:
<script type="text/javascript">
// allocate the function to the window scrolling
window.onscroll = menucontainer;
var startingY = false;
function menucontainer() {
// First top value recovery
if (!startingY) startingY = parseInt(document.getElementById("menucontainer").style.top);
// Scroll top value
if (window.pageYOffset) {
var yrt = window.pageYOffset;
} else if (document.body.scrollTop){
var yrt = document.body.scrollTop;
} else {
var yrt = document.documentElement.scrollTop;
}
document.getElementById("menucontainer").style.top = (yrt + startingY)+ "px";
}
</script>
and 和
<div id="menucontainer">
...
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.