zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    大数据
    优化
    gnu
    sed
    hadoop部署
    安装 zookeeper
    ansible
    ssh 配置无密码登录
    未完待续
    解正向代理、反向代理、透明代理
  • 原文地址:https://www.cnblogs.com/li1234yun/p/9190685.html
Copyright © 2011-2022 走看看