0
此代碼應該覆蓋整個頁面，但反過來它只覆蓋很少的一部分。使用寬度和高度以百分比形式創建時的嵌套Div如果不按需要工作
頭包含3子的div爲LOGO，網站名稱和分別
中間包含2個子的div爲左側面板和MAIN_CONTENT（這包含JQuery的幻燈片放映）
頁腳應LOGOUT選項固定在頁面的底部。
但是所有的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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Photographers' Shack</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
delay: -10000
});
});
//$('#header').corner("bite keep 25px cc:#009");
$('#header').corner();
</script>
<style type="text/css">
.slideshow
{
height: auto;
width: auto;
margin:inherit;
}
.slideshow img
{
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
height:inherit;
width:inherit;
}
@font-face
{
font-family: myFirstFont;
src: url(BubblegumSans-Regular.ttf);
}
#header
{
width: 100%;
height: 15%;
font-family: myFirstFont;
background: -webkit-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Firefox 3.6 to 15 */
background: linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* Standard syntax (must be last) */
}
#logo
{
width: 9%;
height: 99%;
float: left;
text-align:center;
border: 1px solid red;
}
#websiteName
{
width: 69%;
height: 99%;
text-align:center;
display: inline-block;
border: 1px solid red;
}
#otherOptions
{
width: 19%;
height: 99%;
float: right;
text-align:center;
border: 1px solid red;
}
#middle
{
height:75%;
width:100%;
text-align:center;
}
#leftPanel
{
width: 20%;
height: 100%;
float: left;
background: -webkit-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Firefox 3.6 to 15 */
background: linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* Standard syntax (must be last) */
}
#mainPage
{
width: 80%;
height: 100%;
float: right;
}
#footer
{
width: 100%;
height: 15%;
background: -webkit-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* For Firefox 3.6 to 15 */
background: linear-gradient(#003399, #335CAD, #CCD6EB, #335CAD, #003399); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<table align="center"><tr><td><img src="manchester-united-logo.png"/></td></tr></table>
</div>
<div id="otherOptions">
<table align="center" cellspacing="0px" cellpadding="0px"><tr><td> </td></tr><tr><td><h4>Logout</h4></td></tr></table>
</div>
<div id="websiteName">
<table align="center"><tr><td><h1>Photographers' Shack</h1></td></tr></table>
</div>
</div>
<div id="middle">
<div id="leftPanel">
</div>
<div id="mainPage">
<div class="slideshow">
<img src="images/Beetle.JPG"/>
<img src="images/Blister Beetle.JPG"/>
<img src="images/Cicada.JPG"/>
<img src="images/Crab spider.JPG"/>
<img src="images/Dragonfly1.JPG"/>
<img src="images/Grasshopper_Nymph.JPG"/>
<img src="images/IMG_4196.JPG"/>
<img src="images/IMG_4248.JPG"/>
<img src="images/IMG_4261.JPG"/>
<img src="images/IMG_5042.JPG"/>
<img src="images/IMG_5248.JPG"/>
<img src="images/pellucid hawk moth.JPG"/>
<img src="images/Rice Swift Butterfly.JPG"/>
<img src="images/Snout Weevils Mating.JPG"/>
</div>
</div>
</div>
<div id="footer">
<h6>©2013 All Rights Reserved. • Design by Abhijeet Kharkar</h6>
</div>
</body>
</html>