在CSS布局中使用像素和百分比

我正在尝试使用像素和百分比创建CSS布局。原因是第一列（body_first）需要有一个固定的宽度，而最后两个（body_second和body_third）需要有一个流体宽度来填充页面的其余部分。有谁知道如何做到这一点？事先感谢你！在CSS布局中使用像素和百分比

<style type="text/css"> 
    * { 
     padding: 0; 
     margin: 0; 
    } 
    html, body { 
     height: 100%; 
     width: 1000px; 
     background-image:url(main_bg.png); 
    } 
    body { 
     font-family: "lucida sans", verdana, arial, helvetica, sans-serif; 
     font-size: 75%; 
    } 
    h1 { 
     font-size: 1.4em; 
     padding: 10px 10px 0; 
    } 
    p { 
     padding: 0 10px 1em; 
    } 
    #container { 
     min-height: 100%; 
     border-left: 0px solid #666; 
     border-right: 0px solid #666; 
     padding: 0px 40px 0px 40px; 
     margin: 0 auto; 
    } 
    * html #container { 
     height: 100%; 
    } 
    #header { 
     height: 40px; 
     width: 1000px; 
     padding-top: 10px; 
    } 
    .header_column { 
     position: absolute; 
     padding-top: 0px; 
    } 
    #header_second { 
     margin-left: 400px; 
     color:#FFF; 
    } 
    #header_third { 
     margin-left: 80%; 
     color:#FFF; 
    } 
    #body { 
     height: 100%; 
     width: 1000px; 
    } 
    .body_column { 
     position: absolute; 
     background-color:#FFF; 
     height: 100%; 
     overflow: auto; 
    } 
    #body_first { 
     width: 168px; 
     background-color: transparent; 
     height: 640px; 
     margin-top: 10px; 
    } 
    #body_second { 
     margin-left: 163px; 
     width: 400px; 
     background-color:#FFF; 
     height: 640px; 
    } 
    #body_third { 
     margin-left: 563px; 
     width: 400px; 
     border: 1px; 
     background-color: #919191; 
     height: 640px; 
    } 
    #footer { 
     padding-top: 50%; 
    } 
    </style> 
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="header"> 
     <div id="header_first" class="header_column"><img src="header_logo.png" width="35" height="16" border="0"></div> 
     <div id="header_second" class="header_column">asdas</div> 
     <div id="header_third" class="header_column">asdas</div> 
     </div> 
     <div id="body"> 
     <div id="body_first" class="header_column"> 
      <div style="background-image: url(tab_bg.png)"> 
      <div id="TabbedPanels1" class="TabbedPanels"> 
       <ul class="TabbedPanelsTabGroup"> 
       <li class="TabbedPanelsTab" tabindex="0"> 
        <div style="padding-top: 6px;"><img src="1.png" width="20" height="17"></div> 
       </li> 
       <li class="TabbedPanelsTab" tabindex="0"> 
        <div style="padding-top: 6px;"><img src="2.png" width="20" height="17"></div> 
       </li> 
       <li class="TabbedPanelsTab" tabindex="0"> 
        <div style="padding-top: 6px;"><img src="3.png" width="20" height="17"></div> 
       </li> 
       <li class="TabbedPanelsTab" tabindex="0"> 
        <div style="padding-top: 6px;"><img src="4.png" width="20" height="17"></div> 
       </li> 
    </ul> 
       <div class="TabbedPanelsContentGroup"> 
       <div class="TabbedPanelsContent">Content 1</div> 
       <div class="TabbedPanelsContent">Content 2</div> 
       <div class="TabbedPanelsContent">Content 3</div> 
       <div class="TabbedPanelsContent">Content 4</div> 
    </div> 
      </div> 
      </div> 
     </div> 
     <div id="body_second" class="header_column">asdas</div> 
     <div id="body_third" class="header_column">asdas</div> 
     </div> 
    </div>

来源

2011-02-11 methuselah

一个很好的资源我喜欢用这种布局：http://matthewjamestaylor.com/blog/perfect-3-column.htm其中一些可能有点复杂，但跨浏览器兼容，js免费，并且可以调节表。 – 2011-02-11 16:07:05

这应该做到这一点，但它确实意味着把你body_first里面你body_second。下面是一个普通的例子：

HTML：

<div class="two"> 
    <div class="one">col 1</div> 
    <div class="inner"> 
    col 2 
    </div> 
</div> 
<div class="three">col 3</div>

CSS：

body { margin: 0; } 
.one { width: 168px; float: left; background: #F66; } 
.two { position: absolute; width: 50%; background: #6F6; } 
.two .inner { margin-left: 168px; } 
.three { width: 50%; float: left; background: #66F; margin-left: 50%; }

工作在http://jsfiddle.net/thewebdes/e2CNa/例子（与滑块调整窗口的大小，看看它在行动）

来源

2011-02-11 15:58:50

在CSS布局中使用像素和百分比

回答

相关问题