div+css布局之固定浮动布局_html/css

来源：知库网

fixedFloat.htm

固定浮动布局-三列

上标题

左导航中内容右导航

下版权

style.css

/* CSS Document */*{ margin:0; padding:0;}body{ margin:10px;}#header{ border:1px solid black; width:600px; height:60px; margin:0 auto; margin-bottom:10px;}#header h1{ height:60px; line-height:60px; font-size:16px; text-align:center;}#body{ width:600px; margin:0 auto;}#navl{ border:1px solid black; width:150px; height:500px; float:left; margin-bottom:10px; background:lightcyan;}#main{ border:1px solid black; width:294px;/*边框也算一个像素*/ height:500px; float:left; margin-bottom:10px; background:lightblue;}#navr{ border:1px solid black; width:150px; height:500px; float:right; margin-bottom:10px; background:lightyellow;}#footer{ border:1px solid black; width:600px; height:60px; line-height:60px; margin:0 auto; text-align:center; clear:both;}

效果如下：

这种布局的好处是：由于固定了div的宽和高，所有改变浏览器窗口的大小不是影响到div的显示。