html中 div怎么固定到底部

html中 div怎么固定到底部,第1张

想要将html中 div怎么固定到底部很简单,只需要给这个div元素的position属性设置为fixed,并且bottom属性设置为0px即可。具体核心代码如下

<div id="" style="position: fixedbottom: 0px">

固定到底部

</div>

运行效果如下图:

这里使用的是行内式,也可以使用行外式和外部式都可以达到效果。

扩展资料:

HTML的编辑方式:

1、基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS来编写,也可以。不过存盘时请使用.htm或.html作为扩展名,这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。

3、所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe);Microsoft Visual Studio(出品公司:微软)。

参考资料:百度百科——HTML

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<body>标签中,输入html代码:

<div>123456</div><div style="position: absolutetop: 0z-index: -1">abc</div>

3、浏览器运行index.html页面,此时“abc”的div模块被成功设置到了最底层。

<style type="text/css">

    .main{

        width:900px

        height:500px

        overflow:hidden

        position: relative

        margin:0 auto

        border:1px solid #000

    }

    .bottom-center{

        background: green

        width:100px

        height:100px

        position: absolute

        bottom: 0px

        left: 50%

        margin:0px 0px 0px -50px

    }

</style> <div class="main">

    <div class="bottom-center"></div>

</div>

这样就好了,margin的-50其实是根据方块儿的半径算出来的,可以改main的宽度试下


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7540662.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-06
下一篇 2023-04-06

发表评论

登录后才能评论

评论列表(0条)

保存