您的位置：首页 > 其它

头部和底部固定，中间内容可滚动

2016-03-25 17:53 579 查看 
html+css的代码的展示
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下固定，中间内容可以滚动</title>
<style type="text/css">
html,body,.page{width:100%; height:100%;overflow:hidden;}
.top,.con,.bottom{position:absolute; left:0; right:0;}
.top{top:0;z-index:1; height:30px;background:#ff0;}
.con{top:30px; bottom:40px; overflow:auto;}
.bottom{bottom:0;z-index:1; height:40px;background:#00f;}
 
</style>
</head>
<body>
<div class="wrap">
<div class="top">头部</div>
<div class="con">中间内容<br/>
中间内容<br/>
中间内容<br/>
中间内容<br/>
中间内容<br/>
中间内容<br/>
中间内容<br/>
 
</div>
<div class="bottom">底部内容</div>
</div>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航