放置全屏地圖時遇到的問題只锭，解決方案如下：
方法一：
#map {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
background: #00FF00 url('map/n/n/n.png') repeat;
z-index: 0;
overflow:hidden; word-break:break-all; }
重點是要top和bottom一起使用，這是很反常規(guī)的用法院尔，可以強制定義盒模型的區(qū)域蜻展。
還會出現(xiàn)滾動條，所以把溢出都設(shè)為hidden邀摆。
方法二：
html, body
{
padding: 0;
margin: 0;
height: 100%;
overflow:hidden;
}
#map
{
height: 100%;
z-index: 0;
background: #00FF00 url('map/n/n/n.png') repeat;
}
傳送門：CSS實現(xiàn)div的高度填滿剩余空間/解決高度自適應(yīng)問題
ps：傳送門的鏈接具體寫了填充剩余空間的css纵顾，拷貝過來以備后用：
高度自適應(yīng)問題，我很抵觸用js去解決栋盹，因為不好維護施逾，也不夠自然，但是純用CSS例获，難度不小汉额，比如下面我要說的例子。
需求：
- 這個矩形的高度和瀏覽器窗口的高度相同榨汤，不能出現(xiàn)縱向滾動條
- 綠色部分高度固定蠕搜，比如50px
- 紫色部分填充剩余的高度
HTML結(jié)構(gòu)暫且如下：
<div id="main">
<div id="nav">nav</div>
<div id="content">content</div>
</div>
先看1.
html,
body {
height:100%;
margin:0px;
padding:0px;
}
#main
{
background-color:#999;
height:100%;
}
需求2 也很容易：
#nav
{
background-color:#85d989;
height:50px;
}
需求3 是最讓人頭痛的，一般我們都會想到height:100%收壕， 但是100%是以父元素的高度為準(zhǔn)的讥脐，比如父元素的高度是300px遭居，#nav占去了50px，#content理應(yīng)是250px旬渠，但是寫成height: 100%俱萍，結(jié)果就是#content的高度也變成了300%，出現(xiàn)了需求不允許的縱向滾動條告丢。
當(dāng)然枪蘑，用js解決這種問題是相當(dāng)簡單的，但是這次我就是不想用js岖免，下面就來試吧：
這個需求真的讓我非常崩潰岳颇，看似簡單，換了n種方式都覺得不靠譜颅湘，最后找到一種最接近理想效果的方法话侧，如下
html,
body {
height:100%;
margin:0px;
padding:0px;
}
#main
{
background-color:#999;
height:100%;
}
#nav
{
background-color:#85d989;
width:100%;
height:50px;
float:left;
}
#content
{
background-color:#cc85d9;
height:100%;
}
這里利用了浮動，最后的結(jié)果僅僅是看著沒問題闯参，當(dāng)然了瞻鹏，如果你只是簡單的展示文本和圖片，這種方法已經(jīng)夠用了鹿寨，但是如果你想用js做點交互新博，比如#content內(nèi)部有個需要拖拽的元素，它的top最小值肯定不能是0脚草，否則就被#nav擋住了赫悄，悲劇的是我就有這種需求，于是繼續(xù)苦逼的試馏慨。
經(jīng)過一天的嘗試埂淮，加上高人指點，終于有解了写隶，淚奔啊
#nav
{
background-color:#85d989;
width:100%;
height:50px;
}
#content
{
background-color:#cc85d9;
width:100%;
position:absolute;
top:50px;
bottom:0px;
left:0px;
}
