div固定到浏览器底部

已于 2023-03-21 11:07:34 修改
阅读量2k 收藏 3
点赞数 1
文章标签： css html css3
于 2023-03-20 21:10:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigorange1/article/details/129667928
版权
该文章介绍了两种方法通过CSS来确保footer始终位于页面底部。第一种方法使footer在内容不足一屏时仍保持在底部，不悬浮。第二种方法让footer在页面滚动时始终保持在屏幕底部，实现固定悬浮效果。示例代码展示了具体的样式设置。
摘要由CSDN通过智能技术生成

在设计网站的时候，如果你某个页面的内容没有满屏，那你的footer会离浏览器底部很远，整体看起来很难看，这里用css提供一种方法来将footer固定在浏览器底部。

1.footer部分位于底部

1.footer部分位于底部，但不悬浮，当页面内容很少时，footer也始终位于底部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS制作始终固定页面底部的DIV|www.abaonet.com|</title>
<style type="text/css">
html {
  
}
body {
        font-size:12px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        height:100%;
        position:relative;
        overflow:auto;
        margin:0;
}
.top {
     /*   position:fixed;*/
        right:0px;
        position:absolute;
        right:17px;
        bottom:0px;
        background:#000;
        color:#fff;
        border-top:1px solid #fff;
        display:block;
        width:100%;
        text-align:right;
        filter:alpha(opacity=70);       /* IE */
        opacity: .7;           /* 支持CSS3的浏览器（FF 1.5也支持）*/
        font-weight:bold;
}
.top span {
        display:block;
        position:relative;
        top:0;
        left:0;
        padding:5px;
}
.top a, .top a:link, .top a:visited, .top a:hover, .top a:active {
        color:#fff;
}
</style>
</head>
        <body>
		<div style="width:900px"></div>
        <p>position:fixed;m<sub>2</sub></p>
        <p>position:fixed;m<sup>3</sup></p>
      
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <div class="top" > <span> <a href="#top">position:fixed;</a> </span> </div>
</body>
</html>
</body>
</html>

在这里插入图片描述

2. footer悬浮于底部

当我们滑动鼠标时，不管怎么翻动页面，footer部分始终位于底部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS制作始终固定页面底部的DIV|www.abaonet.com|</title>
<style type="text/css">
html {
}
body {
        font-size:12px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        margin:0;
}
.top {
        position:fixed;
        right:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        border-top:1px solid #fff;
        display:block;
        width:100%;
        text-align:right;
        filter:alpha(opacity=70);       /* IE */
        opacity: .7;           /* 支持CSS3的浏览器（FF 1.5也支持）*/
        font-weight:bold;
}
.top span {
        display:block;
        position:relative;
        top:0;
        left:0;
        padding:5px;
}
.top a, .top a:link, .top a:visited, .top a:hover, .top a:active {
        color:#fff;
}
</style>
</head>
        <body>
		<div style="width:900px"></div>
        <p>position:fixed;m<sub>2</sub></p>
        <p>position:fixed;m<sup>3</sup></p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <p>position:fixed;</p>
        <div class="top" > <span> <a href="#top">position:fixed;</a> </span> </div>
</body>
</html>
</body>
</html>

在这里插入图片描述

IT大哥哥
关注
让div固定于屏幕底部
weixin_45034639的博客
10-08 2133
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS控制DIV永远固定在页面底部不随滚动而滚动
09-25
控制DIV永远固定在页面底部的方法有很多，基本上都是通过css或js来实现的，本节也实现了一个这样的效果，大家可以学习下
Vue应用在初始化时可能会出现短暂的“闪动”或“花屏”现象
Keep trying, keep going
09-13 561
Vue应用在初始化时可能会出现短暂的“闪动”或“花屏”现象
底部固定的div
qq_23392319的博客
06-23 1464
底部固定的div。
前端：如何让div一直处于页面底部
YSJ367635984的博客
07-20 3万+
我们分两种情况来看待这个问题 情况一：基于fixed布局的定位 像这个页面一样，无论你怎么滚动滚动条，这个导航栏一直都在页面顶部，不受页面高度的影响，而且一直在你的视线当中 这种设置比较简单，我们只需要在你需要div上加一个fixed属性就可以。 position: fixed; 情况二：基于绝对布局的定位 这种情况是我们需求最多的一种，比如每个网站后面都有一个尾部声明，而且这个网站的每个页面都是不变的样式与内容。 而情况二与情况一不同之处在于： 情况一一直在我们视线当中。 情况二需要我们滚动到页面最底
div 底部固定方法（不用position定位）
weixin_34310785的博客
04-26 4483
方法一：全局增加一个负值下边距等于底部高度 <style> html, body { height: 100%; margin: 0; } .content { padding: 20px; min-height: 100%; margin: 0 auto -50px; } .footer,.push { ...
CSS控制DIV层固定在浏览器底部
37度2
12-17 3928
<br />使用CSS控制DIV层，使这个DIV层一直在浏览器底部，代码如下：<br />#foot{ <br />  width:100%; <br />  height:50px; <br />  position:absolute; <br />  top:100%; <br />  margin-top:-50px; <br />  background:Blue; <br />  color:white; <br />}<br />首先要设置定位为绝对定位，并设置top为100%，当div的hei
div固定在网页底部
得已
06-09 1万+
css        position: fixed;bottom: 0;
CSS div水平垂直居中和div置于底部
热门推荐
Get Things Done
07-26 8万+
一、水平居中 .hor_center { margin: 0 auto; } 二、水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_center { position: absolute; top: 50%; left: 50%; ma
将一个div固定在父元素的底部
weixin_62462734的博客
05-29 3067
使用flex布局，父元素纵向排列，子元素margin-top:auto----将自身顶部与剩余空间左对齐，即固定在底部。
通过 css 将 div 固定在底部 - css
survivorsfyh的博客
05-13 8457
对将要固定至底部的 div 设置如下 class 样式即可： 设置基础宽高后并添加绝对位置定位 position 为 fixed 和 bottom 为 0； .footViewStyle { /*底部视图*/ background-color: #F4F5F6; width: 100%; height: 60px; position: fixed; bottom: 0; } 以上便是此次分享的全部内容，希望能对大家有所帮助！ ...
纯css控制div保持在浏览器底部
04-17
纯css控制div保持在浏览器底部
使div固定在底部居中
weixin_44546460的博客
03-26 697
如何将div固定在底部？是经常会用到的样式。
css/html 将一个div固定在页面的底部位置
weixin_62462734的博客
04-06 2602
利用position:fixed属性。
div固定在页面底部（含滚动条）
极赫赫的博客
09-13 1984
今天做了一个选择图标的业务页面，主要是选择上传按钮后，弹出数据库的图库iframe,含列表和分页器，想把两个div做成自适应的页面，遇到了关于定位的问题，便记录下来了
固定在浏览器底部
wzjemb的专栏
05-29 651
固定在页面底部         html, body, div { margin:0; padding:0; border:0; font-size:100%; background:transparent; } body { background:#f2f2f2; font:12px 宋体, Verdana, Tahoma, Lucida Grande, Arial, sans-se
vue div底部
qq_28487195的博客
07-07 1949
我们可以将页面的容器设置为flex并且指定flex-direction属性为column，然后将div的margin-top属性设置为auto，这样div就会自动向上推到页面底部。在很多情况下，我们希望把某个元素放在div的底部，这时候我们可以采用以下几种方法。我们可以将div的position属性设置为absolute，然后指定bottom为0，这样div就会固定在页面底部。第三种方法是使用CSS的calc属性。我们可以将div的高度设置为100vh并且减去自身的高度，这样div就会自动跟随页面底部。
flex 底部固定_div 底部固定方法（不用position定位）
weixin_42602726的博客
02-23 1632
方法一：全局增加一个负值下边距等于底部高度html, body {height: 100%;margin: 0;}.content {padding: 20px;min-height: 100%;margin: 0 auto -50px;}.footer,.push {height: 50px;}Sticky Footer with Negative Margin 1Add ContentFoot...
固定一个div在浏览器底部
weixin_33743703的博客
11-13 242
转自原文如何固定一个div在浏览器底部 方法1：使用CSS绝对定位 div{ position:absolute; bottom:0px; left:0px; } 方法2：使用CSS固定定位 div{ position:fixed; bottom:0px; left:0px; } 方法3：使用Float浮动定位(...
如何使table的分页固定处于页面底部
最新发布
10-19
要使表格（Table）的分页栏固定在页面底部，通常是在网页开发中使用插件或库来实现分页功能的同时，调整其定位。这里以使用jQuery DataTables插件为例，它提供了内置的分页功能和定制选项： 1. 首先，在初始化DataTable时，选择合适的分页样式，如Bootstrap模态框风格（如果使用的是Datatables的Bootstrap插件）： ```javascript $('#your_table_id').DataTable({ dom: 'Bfrtip', // 定义DOM结构，'f'代表分页按钮在foot部分 buttons: [], // 可选的分页按钮配置 pagingType: "bootstrap", // 使用Bootstrap模态框风格的分页 }); ``` 2. 确保分页脚的容器样式将其定位到文档底部，例如使用Flexbox或Grid布局： ```css .dataTables_scrollBody { /* 或者是 Datatable实例的container ID */ position: relative; overflow-y: auto; /* 隐藏超出内容 */ } .dataTables_paginate { /* 分页脚的class */ position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; /* 提高层级以覆盖其他内容 */ } ``` 3. 如果有滚动条，记得处理分页栏跟随滚动条的行为： ```css .dataTables_scrollBody div.dataTables_scrollHeadInner { /* 或者根据情况调整 */ overflow-x: hidden !important; /* 防止分页栏随着滚动消失 */ } ``` 完成以上步骤后，你应该能看到分页栏固定在了页面底部。请注意，具体代码可能因使用的库版本或项目需求略有不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值