百分比和固定宽度的混合布局

今天准备做下载站的分类策划，在网上逛的时候，逛到了微软下载中心这个网站。感觉很不错，做得简洁大方。平时有个小嗜好，就是看看网页是怎样布局的，于是用firefox
的web developer插件，将浏览器窗口调小，当分辨率调到800*600时，水平方向依然没有出现滚动条。而网页的主要内容区都没有缩小，只是原来右边的空白部分没有了。以前在书上看过，有的设计师通过js检测浏览器窗口的来改变布局。是不是也是通过js实现的呢。还是还是通过css的百分比布局就能实现呢。
     于是，用firebug查看它的首页，一看，网页里用了很多的表格。网页的主要部分都是用表格布局的。我就想，作为微软这样知名的公司。为什么在现在这个css已经成为一种广泛使用的语言而仍然使用如此广受批评的表格布局呢。是不是要实现这种布局效果用css比较难以实现呢。
    “用表格能实现的，用css一定能实现，用css能实现的，用表格不一定能够实现”一直记着这句话。于是，我产生了一种用css将微软下载中心首页重写一遍的想法。下面是我重写的方案：
     头部：我用一个id为hd的div包围了三个子div三个div分别是从上到下的三层。然后将对每一个子块的元素分别设向左、向右浮动。并设固定像素的宽度。就能实现
     中部：左边的侧栏和右边的主要内容栏。侧栏的宽度是固定的181px。而主要内容栏要实现铺平整个浏览器窗口的话，必须设百分比或em宽度，一般是百分比。
     尾部：用一个宽度为100%的div就可以了。
     问题抽出来了，就是怎样实现百分比和固定宽度布局的问题：

       html可简化为：

        < div  id =”content” >
             < div  id =”s_content” > s_content
             </ div >
             < div  id =”m_content” > m_content
             </ div >
         </ div >

         

设一下简单的css样式：

 

#content     {} {
            width:100%;
            height:500px;
        }
        #s_content {} {
            width:180px;
            height:500px;
            background-color:#ccc;
            float:left;
        }
        #m_content {} {
            width:100%;
height:500px; 
            background-color:#c4c9d6;
            float:left;
}

如果这样的话，根本不可能实现s_content和m_content在同一水平线上。难道把#m_content的width属性设为：100%-180px？在ie6和firefox2下都相当于没有设定#m_content属性一样。当然，如果不设定m_content的width，当m_content里的内容宽度小于窗口右侧的宽度时，可以在一条水平线上。如果大于的话，ie6会自动撑开m_content，firefox2中虽然不撑开，但是内容会跑到外面去。这都不是我们想要的。  
    这时，表格的作用就能够发挥出来了。将原来的html代码改为如下：

< div  id =”content” >
     < table  width ="100%" >
         < tr >< td  width ="180px" >
             < div  id ="s_content" >
            s_content
             </ div >
         </ td >
        
         < td  width ="100%" >
             < div  id ="m_content" >  
            m_content
             </ div >
         </ td >
         </ tr >
     </ table >
</ div >
    这样，不管你的显示器分辨率是多少，网页都能填满整个宽度。而 s_content 的宽度是固定的。当然这只是使用表格实现固定宽度和百分比的原理。

     下面是我运用这个原理，将微软下载中心的页面框架搭建起来的网页示例。有兴趣的可下载下来看看。示例网页

转载于:https://www.cnblogs.com/muguaworld/archive/2008/07/16/1244271.html