Html 无法使两列布局正常工作
我试图做一个简单的两栏布局，但似乎比我想象的要难 它需要有：Html 无法使两列布局正常工作,html,css,layout,css-float,Html,Css,Layout,Css Float,我试图做一个简单的两栏布局，但似乎比我想象的要难 它需要有： 固定宽度300px的左列 右边的一列，用于填充 页面的其余部分-无论是什么 窗口大小 两个列div必须接触 页底 我遇到的麻烦是第三个要点，如果我使用浮点数，那么右栏将始终包裹在左栏下，我无法使它们都与页面底部齐平 我想我需要浮动左列，因为将右列设置为100%-300px是不可能的 有什么想法吗？谢谢 CSS: #main, * html #left, * html #right { display:inline; height:
- 固定宽度300px的左列
- 右边的一列，用于填充 页面的其余部分-无论是什么 窗口大小
- 两个列div必须接触 页底
#main, * html #left, * html #right { display:inline; height:100% }
#main { display:table }
#left, #right { display:table-cell }
#left { width:300px }
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
*html#leftdisplay:inline；高度：100%显示：表格单元格#main, * html #left, * html #right { display:inline; height:100% }
#main { display:table }
#left, #right { display:table-cell }
#left { width:300px }
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
试试这个-在IE6+上测试过，可以正常工作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body {height:100%;position:relative;margin:0;padding:0;}
.side {float:left;width:300px;height:100%;background:red;}
.main {margin-left:300px;background:blue;height:100%;}
</style>
</head>
<body>
<div class="side">
side content
</div>
<div class="main">
content
</div>
</body>
</html>
html，正文{高度：100%；位置：相对；边距：0；填充：0；}
.side{float:左侧；宽度：300px；高度：100%；背景：红色；}
.main{左边距：300px；背景：蓝色；高度：100%；}
附带内容
内容