將表格佈局遷移到div佈局問題

當前我的佈局使用表格，但在Opera和IE中，所有td高度100％都不起作用。將表格佈局遷移到div佈局問題

在Firefox/Chrome瀏覽器的像下面的圖片：

HTML結構

<table> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <td></td> 
       </tr> 
       <tr> 
        <td style="height:32px;"></td> 
       </tr> 
      </table> 
     </td> 
     <td style="width:64px"></td> 
    </tr> 
<table>

所以，我怎麼能打開這單嗎？

我一派試圖設置第一個div位置絕對和高度32PX，然後把它底部0，第二個div設置高度100％的位置絕對和頂部：0底部：32PX，但不是出於行爲像圖片都沒有。

任何人都可以教我如何遷移表格的佈局？

UPDATE

在一些網頁我的PHP腳本將動態添加頂部欄。

當前佈局：

<div id="leftside"> 
    <div id="topbar"></div> 

    <div id="php-generated-content"> 
     <div id="autofill"></div> 
     <div id="bottombar"></div> 
    </div> 
</div> 
<div id="rightside"> 
    <div id="right-menu"></div> 
</div>

只是一樣的圖片，但在頂部增加一個高度：32PX頂欄然後綠色部分汽車頂部和底部之間吧填寫。

來源

2013-07-04 jk jk

試試這個

CSS

body, html{ 
    height:100%;  
} 
.leftPan{ 
    width:80%; 
    background-color:#066; 
    height:100%; 
    float:left; 
    position:relative; 
} 
.rightPan{ 
    height:100%; 
    width:20%; 
    background-color:#09F; 
    float:right; 
} 
.footer{ 
    position:absolute; 
    height:32px; 
    bottom:0; 
    left:0; 
    width:100%; 
    background-color:#963; 
}

HTML

<div class="leftPan"> 
    Left Panel 
    <div class="footer">Footer</div> 
</div> 
<div class="rightPan"> 
    Rigt Panel 
</div>

jsFiddle File

來源

2013-07-04 13:39:01

感謝您的回覆！我還有一個問題，請檢查我更新的問題 –

，也...右欄是64px不是20％ –

這裏是更新的jsFiddle文件http://jsfiddle.net/p3vTY/4/ –

這取決於什麼樣的S滾動你想要的行爲。有永久屏幕面板和滾動主面板很簡單：

<html> 
<head> 
<style type="text/css"> 
body { padding:0 64px 32px 0; } 
.right-col { background:red; width:64px; height:100%; position:fixed; right:0; top:0 } 
.footer { background:green; height:32px; position:fixed; left:0; right:64px; bottom:0 } 
</style> 
</head> 
<body> 
[content] 
<div class="right-col"></div> 
<div class="footer"></div> 
</body> 
</head>

如果你想頁腳要移動基於主區域的高度（不帶屏幕的底部上方會）是多少更難。我見過的唯一好的解決方案涉及JavaScript。

來源

2013-07-04 13:46:07 Artfunkel

將表格佈局遷移到div佈局問題

回答

相關問題