制作网页底部以及＜footer＞置底

news2024/11/17 18:25:27

前言

我们制作网页时，少不了会给网页制作底部，用来注明作者信息也好，底部导航栏也好。

最近作者在制作个人网站，制作网页底部踩了不少坑，因此来分享一下经验。

页脚置底

页脚置底(Sticky footer)，就是让网页的<footer>部分始终在浏览器底部。

当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；

但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

如下图所示：

页脚置底的几种方法

使用calc()设置内容高度

如果页面是“内容-页脚”结构，如下代码所示：

<div class="content">
  <!-- content -->
</div>
<footer class="footer">footer</footer>

那么，我们就可以使用calc()手动固定内容高度，使内容高度等于 “整个页面高度 - 页脚高度”，这样页脚就被手动固定在底部，但是这个方法有个劣势，需要我们固定“页脚高度”，如果页脚高度不可控或动态，那么这个方法将会破坏界面布局。

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 70px;
}

使用flex布局

如果在页面设计初期，我们就确定：“标题部分-内容部分-页脚部分”三大部分，那么我们可以使用“flex”布局来很方便的固定底部

<div class="content">
  <!-- content -->
</div>
<footer class="footer">footer</footer>

首先，我们将<body>标签改为“flex”布局，并将子元素对齐方式设置为“column”(垂直方向)，最后我们将flex-grow的值设置为“1”(如果整个网页有剩余空间，页脚部分则根据内容部分分配，内容部分则占据剩余的空白空间)

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

将内容部分的margin-bottom改为负值【不推荐】

<div class="wrapper"><!-- content --></div>
<footer class="footer">footer</footer>

我们可以将内容部分的下边界改为负值(大小为页脚的高度)，同时将<html>和<body>高度设置为100%

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}

一个网页底部Demo

该Demo可以复制即用，大家可以自行选用修改

HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
        <div style="min-height: calc(100vh - 150px);"></div>
        <footer>
            <ul>
                <li><a href="/1">首页</a></li>
                <li><a href="/">作品集</a></li>
                <li><a href="/">关于我</a></li>
            </ul>
            <div class="footer-div">
                <span>联系地址：烟台市SDTBU</span>
                <span>邮箱：1600472625@qq.com</span>
                <span>您对网站有任何建议，欢迎联系作者~</span>
                <span>YangYang @ 2024</span>
            </div>
        </footer>		
	</body>
</html>

CSS部分：

body {
    margin: 0px;
}
footer {
	height: 150px;
    background-color: #f5f5f5;
    font-family:Arial, sans-serif;
}

footer > ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

footer > ul > li > a {
    margin-top: 40px;
    display: block;
    color: black;
    text-decoration: none;
    width: auto;
    margin: 20px 40px;
}

.footer-div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.footer-div > span{
    cursor: default;
    color: #666;
    font-size: 0.8rem;;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

效果：

其他说明

margin负值特性

margin-left 设置负值，元素自身向左移动，后面的元素也向左移
margin-right 设置负值，自身不受影响，右边元素向左移动
margin-top 设置负值，元素自身向上移动，下面的元素也向上移
margin-bottom 设置负值，自身不受影响，下方元素向上移动

下面以一个具体的例子来说明margin为负值的四种情况：

<style>
  .container {
    width: 100px;
    height: 200px;
    border: 2px solid red;
    margin: 150px auto;
  }
  .box {
    width: 100px;
    height: 100px;
  }
  .box1 {
    /* 背景色为粉色 */
    background-color: rgb(252, 188, 198);
    /* 负值，元素自身向左移动，会影响后面元素位置 */
    margin-bottom: -50px;
  }
  .box2 {
    /* 背景色为天蓝色 */
    background-color: rgb(136, 208, 237, 0.5);
  }
</style>
<body>
  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
</body>

margin-left为负值的情况

margin-right为负值的情况

margin-top为负值的情况

margin-bottom为负值的情况：

padding为负值

padding不能为负值，如果padding为负值，那么系统会自动会将它与padding为0当做一种情况处理。

使用margin将一个元素置于屏幕中心

将margin与绝对定位结合，实现元素置于屏幕中心的效果。

/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
/* 向上移动自身宽度一半 */
margin-top: -50px;
/* 向左移动自身宽度一半 */
margin-left: -50px;

先利用绝对定位
让元素的顶部和左侧分别与父元素垂直和水平中间对齐
然后再利用margin负值，让元素向上和向左移动自身宽度的一半
这样就实现了水平和垂直居中

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2066221.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！