position fixed not working
Not sure why as top and bottom are both set to 0px; but when using Opera 11.50 and then minimizing opera and then opening it back on from task menu what happens is a certain div element that is set to top and bottom 0px keeps showing some empty space in the bottom if you resize the window its ok but doing minimization of the program and opening it back up to full size messes the position: absolute element.
Here is the code could so开发者_JS百科me one tell me why this is occruing and how I can fix it.
#Panel {
background-color: #fff;
border-right-color: #cdcdcd;
border-right-style: solid;
border-right-width: 1px;
bottom: 0px;
box-shadow: 0px 0px 5px #1b1b1b;
left: 0px;
position: fixed;
text-shadow: 0px 1px 0px;
top: 0px;
width: 280px;
z-index: 3;
}
JSFiddle: http://jsfiddle.net/PcrUB/1/ <-- full code + others
If I'm understanding this correctly, you want the panel to be full height - to stretch from top to bottom at all times? While the content sits to the right and scrolls? I'm guessing a little, so, sorry if that's not what you're trying to do...
While I think the position:fixed problem might actually be an Opera bug, you can avoid it by changing it to position:absolute. It seems to give the same result without the bug.
This test case seems to work in Opera 11.5, IE9, FF5, Chrome 13:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>Page Title</title>
<style>
body { background: #cdcdcd; overflow: hidden; }
#Panel {
background: #fff;
border-right: 1px solid #cdcdcd;
box-shadow: 0px 0px 5px #1b1b1b;
text-shadow: 0px 1px 0px;
position: absolute;
top: 0px;
right: 280px;
bottom: 0px;
left: 0px;
width: 280px;
}
#Content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 285px;
overflow: auto;
}
</style>
</head>
<body>
<div id="Panel">
<div id="Panel_Logo"></div>
<p>panel</p>
</div>
<div id="Content">
<div id="Content_Header"></div>
<p style="height: 2000px;">Forced-height paragraph to induce scrolling.</p>
<p>end</p>
</div>
</body>
</html>
Hope that helps.
加载中,请稍侯......
精彩评论