我正在尝试根据页面高度设置地图高度。就我而言,我有一个弹出窗口,其中包含两个div:左侧是"方向"div,它可以高于弹出窗口并且是正常的可搜索的,右侧是地图方向。地图是弹出窗口的完整高度,但是当我向下滚动时,我在底部看到白色条纹。链接(打开时,将其调整为较小的窗口并尝试提及):
链接到页面
.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 以显示页面全高地图,而不仅仅是可见窗口?
谢谢!
相反的方法可能适合您的需求:将侧边栏设置为 100% 高度,让溢出的内容滚动。
.search_box {
width: 390px;
float: left;
height: 100vh;
overflow-y: scroll;
}