我试图让我的页脚直接出现在我页面上的最后一个div之后,我无法理解为什么它比我想要的低。有人可以帮忙吗? 下面是代码:
<div id="container">
<div id="header">
<h1>
<!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> -->
<a href="#"><img src="tracylogo6header.jpg" alt="Millington and Hope" /></a>
</h1>
<h2>
<!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> -->
</h2>
</div>
<ul id="nav">
<li><a href="index.html">Home</a></li><!--
--><li><a href="stock.html">Stock</a></li><!--
--><li><a href="events.html">Events</a></li><!--
--><li><a href="contact.html">Contact</a></li>
</ul>
<div id="box">
<a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a>
<a href="#"><img src="home6.jpg" alt="Slideshow Image 2" /></a>
<a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a>
</div>
<div id="box2">
<a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a>
</div>
<div id="footer">
<p class="client">Tel: 0785740 E-mail: tjdelape@hotmail.co.uk</p>
</div>
</div>
html,body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body
{
background:rgb(171,163,144);
text-align: center;
min-width: 600px;
}
#container
{
margin:0 auto;
background:rgb(171, 163, 144);
width:80%;
}
#nav
{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
/*background:rgb(161,153,134) /* for non-css3 browsers */
background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
}
#nav li
{
display:inline;
}
#nav a
{
display:inline-block;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding:10px 20px 10px 20px;
text-decoration:none;
color:white;
}
#nav a:hover
{
background:rgb(171, 163, 144);
}
#header
{
padding: 0px;
color: white;
width:100%;
text-align:center;
}
#header h1
{
margin: 0;
}
#stock
{
position:relative;
margin:0 auto;
margin-top:35px;
width: 1000px;
border-collapse:collapse;
}
#stock th
{
height: 30px;
background:rgb(151,143,124);
}
table, td, th
{
color:white;
border: solid 1px black;
padding: 2px;
}
#events
{
position:relative;
margin:0 auto;
margin-top:35px;
width: 1000px;
border-collapse:collapse;
}
#events th
{
height: 30px;
background:rgb(151,143,124);
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:25px;
width:100%;
background:rgb(151,143,124);
border-top:solid 1px white;
}
.client
{
color:white;
margin:3px auto;
text-indent:1cm;
text-align:left;
}
#sold
{
color: red;
}
#box
{
position:relative;
margin:0 auto;
width:100%;
height:200px;
margin-top:100px;
}
#box img
{
margin:0 auto;
border:solid 1px white;
margin: 10px;
}
#box2
{
position:relative;
margin-top:200px;
width: 100%;
}
#box2 img
{
margin:0 auto;
opacity:0.5;
filter:alpha(opacity=50);
}
h3
{
color:white;
text-decoration:underline;
}
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:rgb(171,163,144); /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:rgb(171,163,144); /* column 1 background colour */
}
#left {
float:left;
width:46%;
position:relative;
left:52%;
text-align:left;
overflow:hidden;
}
#right{
float:left;
text-align:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
p
{
color:white;
}
在我的上一个div之后,页脚看起来好像有一个很大的余量,但我不认为这是我宣布的内容?
答案 0 :(得分:2)
您的页脚固定在屏幕底部(位置:固定;底部:0),如果您删除此声明并将页脚放在#container div之外,它应该会产生所需的效果。
答案 1 :(得分:1)
这是你宣布的。这将强制div到页面底部:
#footer {
position:fixed;
left:0px;
bottom:0px;
height:25px;
width:100%;
background:rgb(151,143,124);
border-top:solid 1px white;
}
如果需要,您可以调整上边距,但可以执行此类操作以使其显示在底部div之后。
#footer {
position:relative;
left:0px;
height:25px;
width:100%;
background:rgb(151,143,124);
border-top:solid 1px white;
}
答案 2 :(得分:0)
您可以向padding-bottom: 100px;
添加#container
(或类似值),如下所示:
#container {
margin: 0 auto;
background: #ABA390;
width: 80%;
padding-bottom: 100px;
}
答案 3 :(得分:0)
尝试这一点,分别在顶部和底部粘贴的页眉和页脚的完美编码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Header & Footer</title>
<style type="text/css">
/* Global */
* {
margin: 0;
}
html, body {
height: 99%;
}
/* Header */
.container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
width:100%;
font-family:Segoe UI;
color:#fff;
}
.container-header{
padding-top:5px;
padding-left:20px;
}
/* Footer */
.footer{
background-color:#333030;
width:100%;
font-family:Segoe UI;
color:#fff;
}
.footer img{
padding-left:15px;
}
/* Page Content */
.content{
height: auto !important;
}
.container p{
font-size:12pt;
font-weight:bold;
}
</style>
</head>
<body>
<!-- Header Div -->
<div class="container">
<table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
<tr></tr>
<tr>
<td></td>
<td>
<div style="padding-left:100px;font-size:36px;">Header</div>
</td>
</tr>
<tr></tr>
</table>
<!-- Page Content Div -->
<div class="content">
Blah Blah
</div>
</div>
<!-- Footer Div -->
<div class="footer">
<table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
<tr></tr>
<tr>
<td></td>
<td>
<div style="padding-left:100px;font-size:36px;">Footer</div>
</td>
</tr>
<tr></tr>
</table>
</div>
</body>
</html>
干杯!!!