HTML中实现两个列，每个列都固定宽度高度占满整个屏幕。如果内容多就出现滚动条！

最新推荐文章于 2021-06-26 11:41:50 发布

sdsxc

最新推荐文章于 2021-06-26 11:41:50 发布

阅读量4.5k

点赞数

本文链接：https://blog.csdn.net/energeticsunxiaocong/article/details/40049313

版权

别提了，上午折腾了一个上午！

我的意思很明确就是把一个网页分成两列，每一列都固定宽度和高度，最后中间有一个边框，显得比较工整一些！

折腾了一个上午，居然没有实现，我在想什么时候网页编程也和winform一样就好了，太当疼了，没有人做一个ui出来可以兼容所有的这些东西么？

中午问了同学之后终于实现了！我把源代码发上来吧！后期有问题可以参考一下！或者联系我@！

Email:Energetic_sxc@126.com

下边就是效果图

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml" > 
  <head> 
  <title>网页布局Demo</title> 
  <style> 
 html 
 { 
     background: #fff; 
     font-size:80%; 
     font-family:  Helvetica,Verdana ,新宋体, Sans-Serif; 
     margin: 0; 
     padding: 0; 
     border:0; 
     height:100%; 
     max-height:100%; 
     overflow:hidden;     
 } 
 body 
 { 
 	height:100%; 
 	max-height:100%; 
 	overflow:hidden; 
 	background:#eee; 
 	padding:0px; 
 	margin:0px; 
 	border:0px; 
 } 
 #header 
 { 
     min-width:980px; 
     position:absolute; 
     margin:0; 
     top:0; 
     left:0; 
     width:100%; 
     height:56px; 
     background:#e0e0e0; 
     overflow:hidden; 
     border:solid 1px red; 
 } 
 #info 
 { 
 	height:40px; 
 	background-color:#8f8f8f; 
 	width:100%; 
 } 
  
 div#title 
 { 
     text-align: left; 
 } 
 div#hbar 
 { 
 	position:absolute; 
 	left:182px; 
 	top:0; 
 	width:8px; 
 	background:#e0e0e0; 
 	border-right:solid 1px #e8e8e8; 
 	height:100%;	 
 } 
 div#bar 
 { 
     height:11px; 
     min-width:980px; 
     width:100%; 
     left:0px; 
     position:absolute; 
     bottom:0px; 
 } 
  
 #maincontainer 
 { 
   position:absolute; 
   top:0px; 
   width:100%; 
   bottom:20px; 
   overflow:hidden; 
   left:0px; 
   background:#fff; 
 } 
 *html #maincontainer 
 { 
 	top:0; 
 	left:0; 
 	height:100%; 
 	max-height:100%; 
 	width:100%; 
 	position:absolute; 
 	border-top:57px solid #fff; 
 	border-bottom:20px solid #fff; 
 } 
  
 #leftcontainer 
 { 
     width: 180px; 
     top:0; 
     left:0; 
     height:100%; 
     position:absolute; 
     overflow:auto; 
     border:solid 1px green; 
     background-color:#eee; 
      
 } 
   
  
 #main 
 { 
     width:auto; 
     position:absolute; 
     border:solid 1px black; 
     height:100%; 
     left:190px; 
     right:0; 
     overflow:auto; 
     background-color: #fff; 
 } 
  
  
 #footer 
 {    
    position:absolute; 
    margin:0px; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:18px; 
    overflow:hidden; 
    background:#eee; 
    min-width:980px; 
    color: #999; 
    border-top:solid 1px #000; 
 } 
  
  
  </style> 
  </head> 
  <body>  
            <div id="maincontainer"> 
                <div id="leftcontainer">   
                </div> 
                <div id="hbar"> </div> 
                <div id="main"> 
                     
   
                  </div> 
            </div> 
            <div id="footer"> </div> 
  </body> 
  </html>