html - 将页脚带到内容的末尾

Question

我试图让我的页脚直接出现在我页面上的最后一个 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&nbsp;&nbsp;&nbsp;&nbsp;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 之后，页脚似乎有很大的余量，但我认为这不是我声明的？

score 2 · Accepted Answer

您的页脚固定在屏幕底部（ position: fixed; bottom: 0 ），如果您删除此声明并将页脚放在 #container div 之外，它应该会产生所需的效果。

score 1 · Accepted Answer

这就是你所声明的。这将强制 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;
}

score 0 · Accepted Answer

您可以将padding-bottom: 100px;（或类似的值）添加到您的#container中，使其如下所示：

#container {
  margin: 0 auto;
  background: #ABA390;
  width: 80%;
  padding-bottom: 100px;
}

score 0 · Accepted Answer

试试这个，完美的 Header 和 Footer 分别粘在顶部和底部的代码：

<!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>

干杯！！！

html - 将页脚带到内容的末尾

4 回答 4

Related

Reference