我正在拼命想弄清楚为什么我为特定站点编写的代码不能正常工作。
我页面的主体(下面链接中的白色区域)应该从导航延伸到页脚,但只在某些页面上这样做。
无论高度如何,页脚都会自动放置在每个页面的底部(即在 400 像素高度的页面上位于页面底部)。
有没有可能我只是错过了一些非常基本的东西?
我在以下位置发布了指向该网站开发版的链接:
我遇到问题的页面是索引和“注册”链接。
我正在拼命想弄清楚为什么我为特定站点编写的代码不能正常工作。
我页面的主体(下面链接中的白色区域)应该从导航延伸到页脚,但只在某些页面上这样做。
无论高度如何,页脚都会自动放置在每个页面的底部(即在 400 像素高度的页面上位于页面底部)。
有没有可能我只是错过了一些非常基本的东西?
我在以下位置发布了指向该网站开发版的链接:
我遇到问题的页面是索引和“注册”链接。
这是因为如果您的观看区域很大,则没有足够的内容将其完全填满。如果您在具有较大窗口的监视器上查看,您会发现它不是一直到页脚的白色。
编辑:将行 padding-bottom:100px 添加到 #bodyContainer 并将 margin-top:-100px 添加到 #footer ,它将起作用。
给你的#wrapper
div 一个背景图片,它是内容区域的宽度和颜色repeat-y
。
编辑:也将背景图像居中!
试试这个。当然不是像我这样的内联 CSS。
<html>
<head>
<title>DIV Test</title>
<style>
body {
margin: 0;
}
#container {
height: 100%;
width: 100%;
}
#header {
background: #0000FF;
position: absolute;
top: 0;
height: 100px;
width: 100%;
}
#content {
background: #FF0000;
height: auto;
width: 100%;
}
#footer {
background: #00FF00;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><!-- header content here --></div>
<div id="content"><!-- main content here --></div>
<div id="footer"><!-- footer content here --></div>
</div>
</body>
希望对您有所帮助。
编辑:指出解决方案是什么。查看页眉和页脚 CSS 位置属性。那应该解决它。
style.css,第 16 行,删除高度:100%
现在
html, body {
background-color:#EDEDE1;
color:#666666;
font:12px Helvetica,Arial,sans-serif;
height:100%;
margin:0;
padding:0;
text-align:justify;
}
后
html, body {
background-color:#EDEDE1;
color:#666666;
font:12px Helvetica,Arial,sans-serif;
margin:0;
padding:0;
text-align:justify;
}