【css】CSS實現div的全屏自適應顯示
還會出現滾動條，所以把溢位都設為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;
}——————————————————————————————————————————————————
ps：傳送門的連結具體寫了填充剩餘空間的css，拷貝過來以備後用：
高度自適應問題，我很抵觸用js去解決，因為不好維護，也不夠自然，但是純用CSS，難度不小，比如下面我要說的例子。
需求：
1. 這個矩形的高度和瀏覽器視窗的高度相同，不能出現縱向滾動條
2. 綠色部分高度固定，比如50px
3. 紫色部分填充剩餘的高度
HTML結構暫且如下：
<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%是以父元素的高度為準的，比如父元素的高度是300px，#nav佔去了50px，#content理應是250px，但是寫成height: 100%，結果就是#content的高度也變成了300%，出現了需求不允許的縱向滾動條。
當然，用js解決這種問題是相當簡單的，但是這次我就是不想用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%;
}
|
這裡利用了浮動，最後的結果僅僅是看著沒問題，當然了，如果你只是簡單的展示文字和圖片，這種方法已經夠用了，但是如果你想用js做點互動，比如#content內部有個需要拖拽的元素，它的top最小值肯定不能是0，否則就被#nav擋住了，悲劇的是我就有這種需求，於是繼續苦逼的試。
經過一天的嘗試，加上高人指點，終於有解了，淚奔啊
#nav
{
background-color:#85d989;
width:100%;
height:50px;
}
#content
{
background-color:#cc85d9;
width:100%;
position:absolute;
top:50px;
bottom:
|