html - 如何制作页脚?

标签 html css

<分区>

我想制作一个始终位于网页底部的页脚。我希望它在页脚中包含这个:

    <section>
        <h3><b>AnDeb-Autos</b></h3>
        <p>07956010151<br>
        info@andebautos.com<br><br>
        <b>Post only address because we are mobile van based</b><br><br>
        Alison Business Centre,<br>
        40 Alison Crescent<br>
        Sheffield<br>
        S2 1AS</p>
    </section>
    <section>
        <h3>Connect with us!<h3>
        <ul class="social">
            <li><a href="#"><img src="FACEBOOK" /></a></li>
            <li><a href="#"><img src="EBAY" /></a></li>
            <li><a href="#"><img src="GOOGLEPLUS" /></a></li>
        </ul>
    </section>

我希望它有 100% 的宽度和高度,以适应所有内容。我还希望它具有黑色背景色,具有不透明度,因此它不那么坚固。

最佳答案

在你的 CSS 样式表中添加这些

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
    padding: 25px;
}

section {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
   overflow:hidden;
}

关于html - 如何制作页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33052339/

上一篇:html - 按钮放置在彼此下方并带有空格

下一篇:css - 变换旋转在 Quirks 模式下不起作用

相关文章:

css - 如何在 div block 中直观地扩展 HTML 元素?

javascript - 从 JavaScript 访问 DIV 元素

html - 如何在 div 中垂直居中 H1?

html - div 中不需要的文本行

JavaScript 禁用所需消息

jquery - 每次按键jQuery检测输入是否有文本

css - Ionic 2 大屏幕分辨率应用程序

javascript - 如何使用内部元素填充获得完整的主体宽度?

javascript - 以旋转轮播样式向 div 添加类

javascript - 如何在一个 html 标签上调用多个 onkeyup 事件