在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佈局中使用像素和百分比

回答

相關問題