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

21xxb 2008-03-13 07:03:13
  想用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>
...全文
104 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
飘零雾雨 2008-03-16
  • 打赏
  • 举报
回复
参考:http://blog.doyoe.com/article.asp?id=135
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>
Atai-Lu 2008-03-15
  • 打赏
  • 举报
回复
!important用这个就可以解决了,IE、FF下均可使用
Atai-Lu 2008-03-15
  • 打赏
  • 举报
回复

#leftdiv{height:auto!important;height:360px;min-height:360px;}
#rightdiv{height:auto!important;height:360px;min-height:360px;}
孟子E章 2008-03-15
  • 打赏
  • 举报
回复
http://www.cnbruce.com/blog/showlog.asp?log_id=875
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>

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧