兩個問題引題
1）width，height設置爲百分比
2）max-width , max-height 到底是什麼意思
0、max-width，max-height 一幫情況使用在圖形元素當中，原因是怕圖片超出了父容器的大小，那麼控制圖片最大就是這個值，超過了則按這個值顯示，如果沒有超過則按 width height進行佈局。
1、針對所有HTML元素都具有width 與 height ，而且 HTML標籤屬性與CSS屬性在width和height中都是同樣的作用。
2、關於width使用百分比問題，width 與 height都是指在父容器的width 與 height 基礎上計算寬與高，雖然用百分數，但不是真正意義上的佔有多少，父容器的width與height只是一個計算的參考值，雖然子元素被父元素包含，但是在寬度與高度計算上沒有包含關係。另外，width height可以設置200%就不足爲奇了，以父元素爲基礎計算寬高而已了。
3、雖然說盒子模型中有margin border padding ， 但是，如果我們使用百分比，你就會發現無論是margin還是padding他們都是以父容器的寬度爲基礎值計算的，然而沒有與高度扯上關係，那麼padding-top，padding-bottom，margin-top，margin-bottom都是按父容器的寬度來計算的，高度已經不在計算範圍內。然而，border是不能使用百分比的，可以試試，絕對無效。這些給我們一個啓發： 實際開發過程中對於width我們一般採用百分比進行屏幕適應，但不會對高度進行百分比控制。一般容器的高度都是讓他自適應的，然而調整相鄰容器間的距離則是採用margin 或 padding ，採用這兩個我們也是使用絕對像素爲單位進行調整，換句話說，調整間隙一般都是固定的。當然對於一些要求固定高的組件我們的確是用絕對像素單位進行確定，但是對於容器的大小是自適應最好的。採用margin是爲了沒有背景色，採用padding是爲了填充背景色。
總結起來：
1）所有寬度採用百分比
2）容器高度，自適應
3）具體組件高度採用em px 確定
4）調整容器間隙採用 padding margin border 都只用em px
5）特殊固定位置的採用 js動態控制而對於那些要有固定位置的，自然我們採用的是js動態控制，
猶如：某些時候我們想要把公司信息放在瀏覽器底部，但是前面公司要展現的內容我們是不確定的，所以需要動態獲取高度來確定後面元素的位置。如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>div三列布局及div始終定位瀏覽器底部</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
position:relative;
top: 30px;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top: 30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#divContent {
position:relative;
width:100%;
}
#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
.divBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:relative;
width:100%;
margin-top:20px;
}
.divShortBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:absolute;
bottom:0;
width:100%;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function sameHeight() {
var documentBodyHeight;
if((typeof windows)!='undefined') {
//Non-IE
alert('Non-IE');
documentBodyHeight = windows.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
alert('IE 6+');
documentBodyHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
alert('IE 4');
documentBodyHeight = document.body.clientHeight;
}
//alert(documentBodyHeight);
if (document.getElementById('left').clientHeight >documentBodyHeight)
{ //alert('ok');
document.getElementById('divContent').style.height =document.getElementById('left').clientHeight +document.getElementById('left').offsetTop+ "px";
document.getElementById('divBottom').className = 'divBottom';
} else {
//alert('not ok');
document.getElementById('divBottom').className = 'divShortBottom';
}
}
</SCRIPT>
</head>
<body onload="sameHeight()">
<div id="header">
<p>The Header</p>
</div>
<div id="divContent">
<div id="left">
<p>The Body Left</p>
</div>
<div>
<p>The body Center</p>
</div>
<div id="right">
<p>The body Right</p>
</div>
</div>
<div id="divBottom">The Bottom</div>
</body>
</html>