头大的DIV+CSS高度自适应有关问题，请各位高人不吝赐教！

2012-02-27

头大的DIV+CSS高度自适应问题，请各位高人不吝赐教！！！想用DIV+CSS做一个三行两列的布局　　要求：页面自适应屏

头大的DIV+CSS高度自适应问题，请各位高人不吝赐教！！！
想用DIV+CSS做一个三行两列的布局

　　要求：页面自适应屏幕高度宽度，浏览器不出现滚动条，适用IE，FireFox等。
　　其中“header”和“footer”高度固定，“footer”在屏幕最下边，紧贴浏览器状态栏。“leftdiv”与“rightdiv”需要自适应高度及宽度。

　　页面源码如下。刚开始学，遇到问题实在是不知该如何解决，请各位高人帮忙。因为用js到是可以达到要求，但想在这里求个不用js的。

HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %><!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Caterpillar</title><style type="text/css"><!--* {    margin: 0px;    padding: 0px;}body {    height: 100%;}#container {    margin-right: auto;    margin-left: auto;}#header {    background-color: #003300;    height: 60px;    color: #FFFFFF;}#leftdiv {    background-color: #99CC00;    float: left;    width: 200px;}#rightdiv {    background-color: #666600;    margin-left: 200px;}#footer {    clear: both;    height: 30px;    color: #FFFFFF;    background-color: #990000;}--></style></head><body><div id="container">  <div id="header">header</div>  <div id="content">    <div id="leftdiv">leftdiv</div>    <div id="rightdiv">        <p>rightdiv</p>    </div>  </div>  <div id="footer">footer</div></div></body></html>

[解决办法]

HTML code

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Caterpillar</title><style type="text/css"><!--* {    margin: 0px;    padding: 0px;}body {    height: 100%;}#container {    margin-right: auto;    margin-left: auto;}#header {    background-color: #003300;    height: 60px;    color: #FFFFFF;}#leftdiv {    background-color: #99CC00;      position:absolute;    left:0%;    right:80%;    top:60px;    bottom:50px;    width: 200px;}#rightdiv {    background-color: #666600;  /*  margin-left: 200px;*/    position:absolute;    left:15.5%;    right:0%;    top:60px;    bottom:50px;}#footer {    clear: both;    position:absolute;    bottom:1px;left:1px;right:1px;    height: 50px;    color: #FFFFFF;    background-color: #990000;}--></style></head><body><div id="container">  <div id="header">header</div>  <div id="content">    <div id="leftdiv">leftdiv</div>    <div id="rightdiv">        <p>rightdiv</p>    </div>  </div>  <div id="footer">footer</div></div></body></html>
[解决办法]
参考：http://blog.doyoe.com/article.asp?id=135

热点排行