我的布局有问题 - 它不是在线的,只是本地的,但如果你将下面的代码复制并粘贴到html页面并在本地运行,你会看到我所做的同一页面.
它几乎就在那里.我想要实现的是一个页面没有滚动条占用所有可用的垂直空间.是的,我可以在容器声明中设置"overflow:hidden",这有帮助,但这不太对.我想让谷歌地图周围有1em边框.我有三面,但内容div上的100%高度声明崩溃底部边框.如果您没有意识到百分比大小的谷歌地图div的影响,那么父母HAS要声明其工作的高度.由于页脚是绝对的并且在流程之外,因此没有"底部"边界可以工作,并且布局不起作用.内容div 100%高度基本上似乎从视口而不是包含div的大小.
这让我很生气...似乎无法解决如何做到这一点,我真的很感激一些意见.
从这里开始:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:960px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc; …