0

I am trying to make a scrollable div box, and it's height should be exact fit to screen's height(100%).

The problem is if there is a another div box on the top which is the fixed height, how do I make scrollable box to fit to the screen's height?

This is what I tried

<div class="wrap">
  <div class="top">
    Fixed height 100px. No floating or layered box 
  </div>
  <div class="scrollBox">
    Fluid height to screen height 100%
    <br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
  </div>

</div>


html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue }
.top { height:100px; background:green}
.scrollBox {  width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }

This is my demo here http://jsfiddle.net/a5ktensk/77/

Please help

user1833620
  • 751
  • 1
  • 10
  • 30

3 Answers3

2

You can use the vh unit to achieve this.

So 

.scrollBox {height: 100vh; }

vh means viewheight, so will be the current height shown, you can take a little away using the calc feature in CSS

.scrollBox {height: calc(100vh - 100px);

So that will be 100% of the hieght minus 100px for example if you want a fixed div at the top :)

http://jsfiddle.net/g7d2k59m/1/

sirnightowl
  • 113
  • 1
  • 5
1

Apply height: 100vh; overflow: hidden; to .wrap.

Height in vh will force page to use full height as per viewport.

Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.

Overflow:hidden will stop .wrap from scrolling.

html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue;height: 100vh;overflow: hidden; }
.top { height:100px; background:green}
.scrollBox {  width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
<div class="wrap">
  <div class="top">
    Fixed height 100px. No floating or layered box 
  </div>
  <div class="scrollBox">
    Fluid height to screen height 100%
    <br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
  </div>

</div>

To know more about viewport units -

Hope this helps :)

vaishali kapadia
  • 934
  • 11
  • 22
1

I think there calc() function will be handy, try following way:

.scrollBox {  
    width:80%; 
    height:calc(100% - 100px); /* Key Line */
    margin:0 auto 0 auto; 
    border:1px solid #000; 
    overflow-y:auto; background:#eee; 
}
Hanif
  • 3,739
  • 1
  • 12
  • 18