【发布时间】：2014-04-04 14:35:15
【问题描述】：
我正在尝试制作一个带有始终位于底部的页脚的整页 Google 地图页面。
我使用选项卡样式的页面作为指向其他内容的链接，并且地图位于最后一个选项卡上。如果我将代码放在所有选项卡之上，它会完美运行。只是在选项卡内它不显示。
目前我将页脚保持在底部的方法是使用：
.pagewrap {
height: 100%;
margin-bottom: -58px;
}
.pagewrap:after {
content: "";
display: block;
}
.footer {
height: 58px;
}
所以页脚一直停留在底部。
这是我用于页面的代码：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation.css" />
<style>
#map-canvas {
height: 100%;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="js/vendor/modernizr.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="pagewrap">
<div class="row">
<div class="large-12 columns">
<div class="tabs-content">
<div class="content active" id="panel2-1">
<div class="panel" style="border:none;">
<h3>Page title 1</h3>
</div>
</div>
<div class="content" id="panel2-2">
<div class="panel" style="border:none;">
<h3>Page title 2</h3>
</div>
<dl class="accordion" data-accordion>
<dd>
<a href="#panel1">Demo accordian</a>
<div id="panel1" class="content">
Content for the first task lalalalala
</div>
</dd>
<dd>
<a href="#panel2">Demo accordian</a>
<div id="panel2" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel3">Demo accordian</a>
<div id="panel3" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel4">Demo accordian</a>
<div id="panel4" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel5">Demo accordian</a>
<div id="panel5" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
</div>
<div class="content" id="panel2-3">
<div class="panel" style="border:none;">
<h3>Page title</h3>
</div>
</div>
<div class="content" id="panel2-4">
<div class="panel" style="border:none;">
<h3>PAge title</h3>
</div>
<div id="map-canvas"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1"><img src="img/home.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-2"><img src="img/file.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-3"><img src="img/camera.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-4"><img src="img/location.png" class="footer-icon"></a></dd>
</dl>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
有什么想法吗？
【问题讨论】：
-
听起来像“零尺寸地图”问题（初始化时地图隐藏时选项卡的常见问题）。当我尝试运行您发布的代码时出现 javascript 错误。
-
是的，我在基金会支持论坛上看到了一些帖子，上面有同样问题的人，但没有人发布修复它的代码。
-
看来这篇文章会对你有所帮助：stackoverflow.com/questions/20746698/…
标签： google-maps zurb-foundation