1. 爱易网页
  2. CSS教程
  3. css定位页面

css定位页面

日期：2013-05-26　 浏览次数：21300 次

colorandy读者提出这样一个关于页面规划的问题：

“如果有一个footer层，我想让他固定出如今整个页面的最下方，不随着页面中的内容而变化，CSS中要怎样设？比如里面是一些版权信息。由于我整页的内容比较少，footer老跟着内容跑到上面去，很不美观。”

这个问题如果在以前使用表格规划，并不困难，只需给页面的最外层表格高度设置为100%就可以了，然而，在Web标准的规范中，表格的高度曾经属于废止的属性，应该避免使用，而且使用Web标准当前，也不在提倡使用表格规划了，那么能否有办法使用CSS来实现页面的页脚部分固定在浏览器底端呢？

下面就来讲解它的实现方法。

基本思路

首先考虑外层设置一个容器div，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个div设置为#container的子div，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的效果。

点击这里察看案例页面效果。 改变浏览器的高度和宽度，可以看到Footer部分的效果。

代码实现

下面先考虑HTML结构，这个演示页面的HTML代码非常简单。

1
2
3
4
5
6
7
8
9
10
11
12

<body>
	<div id="container">
		<div id="content">
			<h1>Content</h1>
			<p>请改变浏览器窗口的高度，以观察footer效果。</p>
			<p>这里是示例文字，………，这里是示例文字。</p>
		</div>
		<div id="footer">
			<h1>Footer</h1>
		</div>
	</div>
</body>

然后设置CSS，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

	body,html {
		margin: 0;
		padding: 0;
		font: 12px/1.5 arial;
		height:100%;
	}
	#container
							{
		min-height:100%;
		position: relative;
	}
	#content
							{
		padding: 10px;
		padding-bottom: 60px;  
		/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
	}
	#footer
							{
		position: absolute;
		bottom: 0;
		padding: 10px
							0;
		background-color: #AAA;
		width: 100%;
	}
	#footer h1 {
		font: 20px/
                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        格式化CSS和精简CSS的在线CSS优化工具
    2. 
                   
                
                  
    
                      
  2. 
                        serif和sans serif：西方国度的字母体系
    3. 
                   
                
                  
    
                      
  3. 
                        垂直三栏规划拥有相反高度的方法
    4. 
                   
                
                  
    
                      
  4. 
                        CSS教程:招致一些效果的overflow
    5. 
                   
                
                  
    
                      
  5. 
                        CSS实例教程:background-position的说明
    6. 
                   
                
                  
    
                      
  6. 
                        样 式 表 全 接 触（2）
    7. 
                   
                
                  
    
                      
  7. 
                        CSS规划带来的庞大影响:CSS display属性值
    8. 
                   
                
                  
    
                      
  8. 
                        　CSS兼容性技巧大全(四)
    9. 
                   
                
                  
    
                      
  9. 
                        由浅入深实际学习 Web 规范
    10.