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

21xxb 2008-03-13 07:02:21

　　想用DIV+CSS做一个三行两列的布局

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

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

<%@ 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>

...全文

211 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

silence2k 2008-03-14

打赏
举报

给你个链接
这个就是图片填充的
http://www.tuopu.com/

silence2k 2008-03-14

打赏
举报

用纯css实现的话自适应等高要用一些补丁值
代码放家里了你可以网上搜索下
虽然全是代码实现了缺点就是在设计模式下感觉长短不一乱一点

用js 或者图片填充则比较好办

js 可以在页面载入完成后取得 left 和right的高度做比较
以高的为统一高度简简单单就搞定

图片填充就是把right和left 统一装倒一个容器中
给容器一个统一背景填充也非常简单

实现一个效果路径很多
不一定非要走一条路咯........

rainbowliuliang 2008-03-13

打赏
举报

<!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>