How show the scrollbar in Firefox and IE?
Question
I would like to use a scrollbar on a div using the property overflow:auto and setting overflow:hidden on the body. It works well with Chrome but not with Firefox and IE.
Can anyone explain me why there is 2 different behavior with this code?
<html lang="en" class="fillScreen" dir="ltr"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="template4.css" type="text/css">
<style>
.fillScreen {
bottom:0px;
height:100%;
}
html, body {
margin: 0; padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body class="fillScreen">
<div class="fillScreen" style="display:table;width:100%">
<div class="fillScreen" style="display:table-row">
<div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >
<div class="fillScreen" style="display:table;width:100%;overflow:auto">
<div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">
<div class="fillScreen" style="display:table-cell">
<div class="fillScreen" style="position:relative">
<button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It is possible to test it here http://jsfiddle.net/nMSvv/2/ Scrollbar apears in Chrome when resizing the window.
I add, that I absolutely need to display the button with absolute position and need to keep this structure of div
Thank you for any help
1 answers
solution1
0 2012-12-18 13:25:15
Solution is here : http://jsfiddle.net/nMSvv/3/
I needed to wrap the div where I want a scrollbar with :
<div class="fillScreen" style="position:relative;overflow:auto">
<div style="position:absolute;top:0px;left:0px">
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.