CSS3 :Iframe not taking 100% height

Question

I have 2 bootstrap columns.

in the first column there is a fixed position div. and in the 2nd column I have an iframe div. I have given iframe height="100%" but it is not taking 100% of the browser.

.left_side_div{
  width:25%;
  min-height:100%;
  background : #FFFFFF;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  border:thin black solid;
}

.iframe_div{
  width:100%;
  height:100%;
  border:thin black solid;
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
  <div class="left_side_div"></div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
  <div class="iframe_div">
    <iframe src="http://google.co.in/" width="100%" height="100%"></iframe>
  </div>
</div>
</div>

Here is JSFiddle

Any help would be great.

Thank You.

Answer 1

use margin 0 for row

.row{
   margin: 0;
}

Answer 2

don't use % for height insted use 100vh.