使用宽度和高度百分比创建的嵌套Div不能按预期工作
使用宽度和高度百分比创建的嵌套Div不能按预期工作
提问于 2014-07-15 00:17:59
这段代码应该覆盖整个页面，但它只覆盖了很少的部分。
标题包含3个子div，分别对应于徽标、网站名称和注销选项
中间包含2个子div，分别用于左侧面板和MAIN_CONTENT(其中包含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>回答 1
Stack Overflow用户
发布于 2014-07-15 00:24:24
之后清除你的浮点数(“两者”)：https://developer.mozilla.org/en-US/docs/Web/CSS/clear
我假设你会在"#middle“部分这样做：
#middle {
clear:both;
height:75%;
width:100%;
text-align:center;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24741072
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号