Google maps css высота

Question

Я пытаюсь установить высоту карты в соответствии с высотой страницы. В моем случае у меня есть всплывающее окно, которое содержит два div: слева находится «direction» div, который может быть выше всплывающего окна и является нормальным скроллированием, справа - направление карты. Карта - полная высота всплывающего окна, но когда я прокручиваю вниз, я получаю белую полосу внизу. Ссылка (когда открыта, повторно размер его вниз окно меньшего размера и попытайтесь упоминалось):

Link to page

HTML:

<div class="search_box"> 
    <div id="header"> 
     <img src="<?php echo base_url('images/logo.jpg'); ?> "> 
    </div> 
    <div class="content"> 
     <div id="directions"> 
     </div> 
    </div> 
    </div> 

     <div id="map_box"> 
      <div id="slo_map"> 
       <?php echo $map['html']; ?> 
      </div> 
     </div> 

CSS

.search_box { 
    width: 390px; 
    float: left; 
    min-height: 800px; 
    overflow: hidden; 
} 
#header { 
    height: 121px; 
    width: 100%; 
    text-align: center; 

} 
.search_box .content { 
    padding: 15px; 
} 
#directions { 
    background-color: white; 
    float: left; 
    width:350px; 
    height: 100%; 
} 
#slo_map { 
    height: 100%; 
    width: auto; 
    overflow: hidden; 
} 

#map_box { 
    height: 100%; 
    width: auto; 
    overflow: hidden; 
    border-left: 1px solid #6d6d6d; 
} 

всплывающее окно JavaScript:

function popup(mylink, windowname) 
    { 
     if (! window.focus)return true; 
     var href; 
     if (typeof(mylink) == 'string') 
      href=mylink; 
     else 
      href=mylink.href; 
     window.open(href, windowname, 'width=1200,height=800,scrollbars=yes'); 
     return false; 
    } 

Любые идеи, как регулярно устанавливать css для отображения карты с полной высотой страницы, а не только видимым окном?

Спасибо!

Answer 1

Противоположный подход может соответствовать вашим потребностям: установите боковую панель на высоту 100% и прокрутите переполненное содержимое.

.search_box { 
    width: 390px; 
    float: left; 
    height: 100vh; 
    overflow-y: scroll; 
}