zoukankan      html  css  js  c++  java
  • 页面内容不满屏幕高度时,footer底部显示

    底部高度固定的情况下

    <style>
        body,html{ height: 100%; margin: 0; }
        .content{
            min-height: 100%; 
    	padding-bottom: 400px;
    	box-sizing: border-box;
    	height: 1200px;
        }
        footer{
    	 100%;
    	height: 400px;
    	margin-top: -400px;
    	background: #666;
        }
    </style>
    
    <div class="content">页面内容</div>	
    <footer>底部</footer>
    
    
    <style>
    	body,html{ height: 100%; margin: 0; padding: 0; }
    	.container{
    		position: relative;
    		min-height: 100%;
    	}
    	.content{
    		padding-bottom: 400px;
    	}
    	footer{
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		 100%;
    		height: 400px;
    		background: #666;
    	}
    </style>
    
    <div class="container">
    	<div class="content">页面内容</div>	
    	<footer>底部</footer>
    </div>
    
  • 相关阅读:
    343. Integer Break
    338. Counting Bits
    322. Coin Change
    304. Range Sum Query 2D
    303. Range Sum Query
    221. Maximal Square
    213. House Robber II
    cf
    poj2478欧拉函数
    lightoj1138
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/9626168.html
Copyright © 2011-2022 走看看