• DIV 始终位于文档底部


    DIV 始终位于文档底部

    1. 设置body为绝对定位,最小显示高度为:100%,宽度为:100%
    2. 设置底部显示块为绝对定位,bottom: 0,是body元素的最后一个直接子元素;
    3. 设置底部块元素同级元素的上一个兄弟元素边距可以包含下底部元素即可;
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .slibing-div{
                border: 2px red solid; 
                height: 200px; 
            }
            .footer{
                border: 2px blue solid;
            }
        </style>
    </head>
    <body style="min-height: 100%;  100%; position: absolute;">
    	<div style="margin-bottom: 100px;" class="slibing-div">
    		<div style="text-align: center">测试用例</div>
    	</div>
    
    	<div style="position: absolute; bottom: 0;  100%; height: 100px;" class="footer">
    		底部块
    	</div>
    </body>
    </html>
    
  • 相关阅读:
    CSS伪元素
    leetcode
    软件镜像下载
    VUE项目问题
    js定时操作
    div 禁止点击
    JS String 与 Object 转换
    实用类
    XML文件的应用
    Socket编程
  • 原文地址:https://www.cnblogs.com/li1234yun/p/9190685.html
Copyright © 2020-2023  润新知