how to set the outer <div> adapt to the browser,and the div in it adapt to the outer one?

first here is my html demo code

<div class="wrapper">
        <div class="item"></div>
        <div class="item"><开发者_高级运维/div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>                                 
    </div>

I set the outer <div class="wrapper"> adapt to the browser with the css attribute "height:100%;",

as well set the "overflow:hidden;" in order to set the <div class="item"></div> could adapt to outer one.

When the browser height reduced or folded,the brower nust not appear the scroll bar,the scroll could always display in the <div class="wrapper">

but it could not be achieved,Here is my case

how to solved the problem?

thank you:)

---

May be something like this http://jsfiddle.net/g536q/?

---

Please change

overflow:hidden;

to

overflow:auto;