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

21xxb 2008-03-13 07:32:31

  想用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>
...全文
46 点赞 收藏 5
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
zhiin1 2008-03-15
这样可以实现你的要求,但是如果内容太多不是显示不出来了?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<style type="text/css">
html, body {
margin: 0;
overflow: hidden;
}

* html, * html body {
margin: 0;
height: 100%;
}

* html #outer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.fixed {
position: fixed;
}
* html .fixed {
position: absolute;
}
.fixed {
bottom: 0;
width: 100%;
}


.header {
height: 50px;
background: #ff0;
}
.footer {
height: 50px;
background: #f00;
}
.sidebar {
float: left;
width: 210px;
background: #0f0;
height: 9999px;
}
.content {
margin-left: 200px;
background: #00f;
height: 9999px;
}
</style>
<body>


<div id="outer">
<div class="wrapper">
<div class="header">header</div>
<div class="container" style="background:#00f">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
</div>
</div>
<div class="fixed">
<div class="footer">footer</div>
</div>

</body>
</html>
回复
myvicy 2008-03-14
还顶。
回复
使用100%
再设置一下absolute
回复
飘零雾雨 2008-03-14
参考:http://blog.doyoe.com/article.asp?id=135

在该基础上修改一点点就可以了
回复
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>
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2008-03-13 07:32
社区公告
暂无公告