How to scroll a fixed div when I resize the browser window
Question
I created a position: fixed div , which must be always on the top, with width: 900px , now I have the following problem, when I resize the browser window to a size least than 900px my div is cropped and i can't even scroll it because the scroll bar doesnt appear. How can I resolve?
The code is the following: <body> <div class= "bar"><div class="inner_div"></div></div> </body>
Now the css
.bar { position: fixed; height: 60px; width: 900px; border: 2px solid; }
.inner_div {position: absolute; right: 5px; top: 2px; border: 2px solid; width: 100px; height: 15px;}
Trying this code you'll see that if your browser window gets less than 900px the bar is cropped and there isn't way to scroll it and to see the inner_div.
1 answers
solution1
0 ACCPTED 2013-04-09 18:39:22
I'm pretty sure some browsers only use non-fixed elements to determine the width of your content. Adding something like this at the bottom of your page should get you your scroll bar <div style="width:900px;"></div>
Previously I didn't mention that the spacing div can't be empty or has to have a height, so adding a non-breaking space or a 1px height to it will make it fill the width.
Full Code Example: http://jsfiddle.net/8LnBr/
<style>
.bar { position: fixed; height: 60px; width: 900px; border: 2px solid; }
.inner_div {position: absolute; right: 5px; top: 2px; border: 2px solid; width: 100px; height: 15px;}
.spanner{width:900px; height:1px;}
</style>
<body>
<div class= "bar">
<div class="inner_div"></div>
</div>
<div class="spanner"></div>
</body>
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.