怎样让div置底

最新推荐文章于 2023-08-09 11:57:08 发布

jian_vv

最新推荐文章于 2023-08-09 11:57:08 发布

阅读量8k

点赞数 3

分类专栏：网页前端

本文链接：https://blog.csdn.net/jian_vv/article/details/39350831

版权

网页前端专栏收录该内容

1 篇文章 1 订阅

订阅专栏

网上很多方法一般都是这样写的：

.footer{
position:absolute;
bottom:0;
}

这样能够使得footer绝对置底，但是这样有个弊端，当网页内容能够撑开整个页面高度的时候，footer会挡住网页内容。下面的方法，footer不会挡住网页内容

<body>
<div id="main">
</div>
<div id="footer">
</div>
</body>

css这样写：

body{
position:relative;
height:auto;
min-height:100%;
}
.main{
padding-bottom:120px;/**给footer预留空间/
}
.footer{
positon:fixed;
bottom:0;
}

主要是footer的position要用fixed属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jian_vv

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

flex 底部固定_div 底部固定方法（不用position定位）

weixin_42602726的博客

02-23

1613

方法一：全局增加一个负值下边距等于底部高度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...

html将div放到页面最底部,关于html：我如何将div放在容器的底部？

weixin_32263417的博客

06-03

8741

给出以下HTML：Copyright Foo web designs我想让#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗？如果float属性支持"bottom"的值，这似乎可以解决问题，但不幸的是，它没有。这种情况是布局表尚未消失的原因之一。用桌子做这件事非常简单，而且在任何地方都能工作。在CSS中这样做是非常困难的，跨浏览器支持也是如此。更不用说不可...

2 条评论您还未登录，请先登录后发表或查看评论

详解HTML5将footer置于页面最底部的方法(CSS+JS)

09-22

主要介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS导航下拉菜单被JS幻灯片挡住的…

weixin_30443747的博客

11-22

517

网站常会用到一些下拉菜单，，幻灯片，，，飘浮广告等。但经常会发现。幻灯片会挡住下拉菜单或者飘浮广告等。解决办法有下第一，可将幻灯片所在DIV 置于最底层。添加CSS如下 style="z-index:-100;position: relative;" 第二，可将被挡住的DIV/ul/li 置于最高层。添加CSS如下 style="z-index:9999;po...

div置底--支持IE，FireFox

Lang_Ren1981

08-28

343

<html><head&am

js实现div的置底

weixin_34297704的博客

01-08

428

//-------------置底的div---------------------- <div class="mui-content lv-mrcd" id="scrollmenu" onclick="Topfun()"><P align=right>点我置顶&nbsp;&nbsp;&nbsp;&nbsp;</P

div内部的子div如何置底

最新发布

weixin_40444253的博客

08-09

225

div内部的子div如何置底

div+css如何实现页脚的置底

10-30

### 如何使用div+css实现页脚的置底效果在网页设计中，将页脚固定在页面底部是一项常见的需求。这种布局不仅美观，还能提供更好的用户体验，因为无论页面滚动到何处，用户都能轻松找到底部的导航或联系信息。本文...

html5 div 固定在底部,div 底部固定方法（不用position定位）

weixin_39778393的博客

06-10

2329

vue 每次渲染完页面后div的滚动条保持在最底部的方法

08-27

div.scrollTop = div.scrollHeight; }); } // 第一次页面渲染完之后滚动条在最底部 methods: function() { this.$nextTick(function() { var div = document.getElementById('dialogue_box'); div.scrollTop =...

如何使内容在div底部

yangsen0927的博客

11-29

2030

如何使内容在div底部如何插入一段漂亮的代码片如何插入一段漂亮的代码片主要的就是这个段代码introduce.scrollTop = introduce.scrollHeight. function switchs(lable){ var lable1 = document.getElementById('lable1'); var lable2 = docum...

div置于页面底部_移动页面适配的一些实践

weixin_39844284的博客

12-20

340

一、关于rem使用。1、rem是什么rem是(font size of the root element)的官方解释，意思就是根据网页的根元素(即html)来设置字体大小。rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。如果我们设置了：html{ font-size:100px;}那当我们想给div设置宽高为100px、50px时，即...

CSS div水平垂直居中和div置于底部

liuqinhou的博客

04-26

562

【代码】CSS div水平垂直居中和div置于底部。

子div在父div中置底

diligentcat的专栏

08-08

4475

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 子div在父div中置底 .father { width

div固定到浏览器底部

bigorange1的博客

03-20

1984

div固定到浏览器底部

将一个div固定在父元素的底部

weixin_62462734的博客

05-29

2985

使用flex布局，父元素纵向排列，子元素margin-top:auto----将自身顶部与剩余空间左对齐，即固定在底部。

如何设置div在底层

qq_30966497的博客

12-10

4969

通过设置div这两个position:relative;z-index:0可以调节

javascript div 滚动条置底

vivian的专栏

03-22

1296

document.getElementById('div').scrollTop=document.getElementById('div').scrollHeight;

html水平底端,CSS div水平垂直居中和div置于底部

weixin_39621456的博客

06-16

197

jquery in confluence&period;https://confluence.atlassian.com/confkb/how-to-use-javascript-in-confluence-313458839.html https://a ...浅谈Excel开发：四 Excel 自定义函数我们知道,Excel中有很多内置的函数,比如求和,求平均,字符串操作函数,金融函数...

html将div在底部居中

06-11

可以使用CSS中的flex布局来实现将div在底部居中。具体实现方法如下： 1. 在父元素上应用flex布局：`display: flex; flex-direction: column; justify-content: center; align-items: center;` 2. 将要居中的div设置`margin-top: auto;`，这样就会将其推到底部并居中。下面是一个示例代码： ``` <html> <head> <style> .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; /* 为了示例方便，设置容器高度，实际应用中可根据需要设置 */ } .center { margin-top: auto; } </style> </head> <body> <div class="container"> <div>内容1</div> <div>内容2</div> <div class="center">底部居中内容</div> </div> </body> </html> ``` 在上面的示例中，容器高度设置为100vh，这样就可以使容器占据整个屏幕高度。同时，父元素使用了`justify-content: center; align-items: center;`将子元素居中。底部的div使用了`margin-top: auto;`来将其置底并居中。