從網上轉的。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>兩列式全屏布局</title> <style type="text/css"> html, body { margin: 0; padding: 0; } .top { background-color: red; border: solid 1px black; margin: 0 0 5px 0; height: 50px; } .sidebar { position: absolute; left: 0; top: 57px; width: 205px; background-color: yellow; border: solid 1px black; border-left-width: 0; height: 50px; } .main { margin-left: 210px; background-color: white; border: solid 1px black; height: 50px; } </style> </head> <body> <div class="top">A(固定高度，寬度自適應)</div> <div class="sidebar">B(高度任意，寬度為固定)</div> <div class="main">C(高度任意，寬度為除開B之外的所有空間，自適應)</div> </body> </html>