这段代码应该覆盖整个页面，但反过来它只覆盖了非常少的部分。
header包含LOGO、WEBSITE NAME和LOGOUT选项的3个sub-div
中间包含 LEFT PANEL 和 MAIN_CONTENT 的 2 个子 div(其中包含 JQuery 幻灯片)
页脚应固定在页面底部。
但是所有的 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>
最佳答案
之后清除 float (“两者”):https://developer.mozilla.org/en-US/docs/Web/CSS/clear
我假设您会在“#middle”部分执行此操作:
#middle {
clear:both;
height:75%;
width:100%;
text-align:center;
}
关于jquery - 使用宽度和高度百分比创建的嵌套 Div 无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24741072/