想用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