Html 将页脚上移到内容末尾_Html_Css_Footer

Html 将页脚上移到内容末尾

html css

Html 将页脚上移到内容末尾,html,css,footer,Html,Css,Footer,我试图让我的页脚直接出现在我的页面上的最后一个div之后，但我不明白为什么它比我想要的要低。有人能帮忙吗？代码如下： <div id="container"> <div id="header"> <h1>

我试图让我的页脚直接出现在我的页面上的最后一个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>

页脚看起来好像在我的上一个div之后有一个很大的空白，但我不认为这是我声明的？

这是你声明的。这将强制div位于页面底部：

#页脚{
位置：固定；
左：0px；
底部：0px；
高度：25px；
宽度：100%；
背景：rgb（151143124）；
边框顶部：纯色1px白色；
}

如果需要，您可以调整上边距，但可以这样做，使其显示在下div之后

#页脚{
位置：相对位置；
左：0px；
高度：25px；
宽度：100%；
背景：rgb（151143124）；
边框顶部：纯色1px白色；
}

您可以添加

填充底部：100px（或类似值）添加到您的#容器中，如下所示：
#container {
  margin: 0 auto;
  background: #ABA390;
  width: 80%;
  padding-bottom: 100px;
}

您的页脚固定在屏幕底部（位置：fixed；底部：0），如果删除此声明并将页脚放置在#container div之外，则应该会产生所需的效果
 试试这个，页眉和页脚分别粘在顶部和底部的完美代码：
<!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>


页眉和页脚
/*全球的*/
* {
保证金：0；
}
html，正文{
身高：99%；
}
/*标题*/
.集装箱{
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-4em；
宽度：100%；
字体系列：SegoeUI；
颜色：#fff；
}
.货柜头{
垫面：5px；
左侧填充：20px；
}
/*页脚*/
.页脚{
背景色：#333030；
宽度：100%；
字体系列：SegoeUI；
颜色：#fff；
}
.footer img{
左侧填充：15px；
}
/*页面内容*/
.内容{
高度：自动！重要；
}
.货柜{
字号：12号；
字体大小：粗体；
}
标题
废话
页脚

干杯
 你试过我的答案了吗？或者你得到了你的具体答案了吗？