打印

[讨论] 固定头和底，中间部分如何自适应？(各大高手来看看) 继续进阶

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

1^# 大中小发表于 2008-6-3 14:19

以前好像在经典里见过这样的案例，可是怎么找也找不到，请高手们帮一下忙！

要求不管在什么样的显示分辨率下，都是100%的，右边是固定宽度300px;

我要的效果是像微软地图http://ditu.live.com/ 这样的。

头和底永远在那个位置，但是中间部分怎么来做自适应（右边随内容增加而出现竖向滚动条）。

修改：继续进阶，具体内容在26楼

[ 本帖最后由 yj511 于 2008-6-5 10:18 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

做西部数码代理.Cn1元国际45元

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

2^# 大中小发表于 2008-6-3 14:29

自己顶一个

TOP

【美橙超级G空间】688元绑定10个子目录

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

3^# 大中小发表于 2008-6-3 16:02

<!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=gbk" />
<title>design by zidanezhicong</title>
<style type="text/css">
*{margin:0px;padding:0px;}
html,body{height:100%;}
#wrap{height:100%;}
#header{height:65px;background:#000;}
#contentWrap{width:100%;float:left;margin-left:-300px;background:green;}
#content{margin-left:300px;}
#sidebar{width:300px;float:right;background:white;overflow:auto;}
#sidebarContent{margin:2px; border:blue solid 1px;}
#footer{height:30px;background:#999;margin-top:-30px;}
</style>
<script>
//获取视口的高度和宽度。	
function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}
window.onload=window.onresize=function(){
var wh=windowHeight();
document.getElementById("contentWrap").style.height=(wh-65-30)+"px";
document.getElementById("sidebar").style.height=(wh-65-30)+"px";
}
</script>
</head>
<body>
<div id="wrap" class="clear">
<div id="header"></div>
<div id="contentWrap">
<div id="content">
固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固
定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定
头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头
和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应
</div>
</div>
<div id="sidebar">
<div id="sidebarContent">
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 zidanezhicong 于 2008-6-3 16:11 编辑 ]

我爱阿仙奴！

TOP

请大家尊重和保护奥运知识产权。

alize

悲剧小黑

高级会员

帖子: 337
体力: 602
威望: 0
当前: 四川成都

专长 UI,前端制作,JS

4^# 大中小发表于 2008-6-3 16:24

楼上的。。。不用js能实现否？

郁闷......

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

5^# 大中小发表于 2008-6-3 16:31

回复 zidanezhicong 在 3# 的帖子

复制内容到剪贴板

代码:

楼上的。。。不用js能实现否？

你写出来的就是我想要的效果！直接CSS可以实现么？

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

6^# 大中小发表于 2008-6-3 17:36

在下水平有限，暂时未想出纯css解法！

我爱阿仙奴！

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

7^# 大中小发表于 2008-6-3 17:53

<!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>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>

<div id="header">
</div>

<div id="main">
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
<p>是这种效果吗？</p>
</div>
<div id="foot"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

时间匆忙only IE7,FF，下班回家了：）

[ 本帖最后由 jiangxin85 于 2008-6-3 17:54 编辑 ]

这就是签名吗

TOP

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

8^# 大中小发表于 2008-6-4 09:33

回复 jiangxin85 在 7# 的帖子

不行啊，把中间左边的部分得做出来，左边根据右边自适应高度

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

9^# 大中小发表于 2008-6-4 09:50

<!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>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>

<div id="header">
</div>

<div id="main">
<div class="mAB_A">
<p>这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？</p>
</div>
<div class="mAB_B">
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
</div>
</div>
<div id="foot"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

这就是签名吗

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

10^# 大中小发表于 2008-6-4 10:16

回复 jiangxin85 在 9# 的帖子

右边是固定宽度300px;不是width:30%;

我爱阿仙奴！

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

11^# 大中小发表于 2008-6-4 10:45

<!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>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>

<div id="header">
</div>

<div id="main">
<div class="mAB_A">
<p>这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？这里是内容？</p>
</div>
<div class="mAB_B">
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
</div>
</div>
<div id="foot"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

这就是签名吗

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

12^# 大中小发表于 2008-6-4 11:04

回复 jiangxin85 在 11# 的帖子

ie6下有问题，不过已蛮不错！margin-bottom:-35000px; padding-bottom:35000px;

我爱阿仙奴！

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

13^# 大中小发表于 2008-6-4 11:06

引用:

原帖由 zidanezhicong 于 2008-6-4 11:04 发表
ie6下有问题，不过已蛮不错！margin-bottom:-35000px; padding-bottom:35000px;

我一开始就说IE6有问题啊：）
IE6的解决办法就依靠你们来解决了，哈哈
多发挥自己的能力和想象吧

这就是签名吗

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

14^# 大中小发表于 2008-6-4 11:12

ie6真的太多问题，郁闷！
ls可以看看这个http://labs.aoao.org.cn/demo/layout/100x100/
它是故意触发ie下怪异模式的，很特别！

我爱阿仙奴！

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

15^# 大中小发表于 2008-6-4 11:28

关键是这句

：）
这句让IE进入怪异模式，然后在怪异模式中再去制作想要达到的效果

这就是签名吗

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

16^# 大中小发表于 2008-6-4 12:18

经过一番努力，终于做出一个兼容ie6，ie7,FF的纯css解决方案：

<!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=gbk" />
<title>固定头和底，中间部分如何自适应</title>
<style type="text/css">
*{margin:0px;padding:0px;}
html,body{height:100%;overflow:hidden;}
#header{height:65px;background:#000;_margin-bottom:-65px;}
#wrap{_height:100%;_padding:65px 0 30px 0;overflow:hidden;}
div[id="wrap"]{position:absolute;top:65px;bottom:30px;width:100%;}
#contentWrap{height:100%;width:100%;float:left;margin-left:-300px;background:green;}
#content{margin-left:300px;}
#sidebar{height:100%;width:300px;float:right;background:white;overflow:auto;}
#sidebarContent{margin:2px; border:blue solid 1px;}
#footer{height:30px;background:#999;_margin-top:-30px;}
div[id="footer"]{position:absolute;bottom:0;width:100%;}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrap">
<div id="contentWrap">
<div id="content">
固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固
定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定
头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头
和底，中间部分如何自适应固定头和底，中间部分如何自适应固定头和底，中间部分如何自适应
</div>
</div>
<div id="sidebar">
<div id="sidebarContent">
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
sidebar<br />
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 zidanezhicong 于 2008-6-4 12:28 编辑 ]

我爱阿仙奴！

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

17^# 大中小发表于 2008-6-4 12:29

如果不依靠
这句
还有完美的解决方案没

这就是签名吗

TOP

th241

中级会员

帖子: 110
体力: 241
威望: 0
当前: 北京朝阳区

18^# 大中小发表于 2008-6-4 12:35

回复 zidanezhicong 在 16# 的帖子

div[id="footer"]这个什么意思？

爱生活爱拉灯自然美

TOP

myidear

中级会员

帖子: 166
体力: 389
威望: 0
离线: 1 天

专长 网页设计,Flash,前端制作

19^# 大中小发表于 2008-6-4 13:24

div[id="footer"]{
position:absolute;
bottom:0;width:100%;
}不明白是什么意思,请高手赐教!

设计自己,完善自己!

TOP

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

20^# 大中小发表于 2008-6-4 13:57

回复 jiangxin85 在 15# 的帖子

ok,完美不完美不说,暂时可以实现我要的效果了

谢谢

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

21^# 大中小发表于 2008-6-4 14:09

回复 myidear 在 19# 的帖子

div[id="footer"]是一个属性选择器，意思就是id为footer的div，和#footer是一样的，不过ie7，FF才支持。
这段话的作用是将#footer绝对定位到视口的底部

我爱阿仙奴！

TOP

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

22^# 大中小发表于 2008-6-4 19:27

复制内容到剪贴板

代码:

关键是这句

<!-- hi IE,please go to Quirks Mode-->

：）

这句让IE进入怪异模式，然后在怪异模式中再去制作想要达到的效果

能不能把这个注释去掉,实现效果?

TOP

MarVell

高级会员

帖子: 739
体力: 728
威望: 0
当前: 河南洛阳

专长 前端制作

23^# 大中小发表于 2008-6-4 20:18

回复 yj511 在 22# 的帖子

去掉的话就用JS实现吧...

别的..要求太过苛刻,如果不放弃IE6的话,很难实现.

不在放荡中变坏,就在沉默中变态...

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

24^# 大中小发表于 2008-6-4 20:32

引用:

原帖由 MarVell 于 2008-6-4 20:18 发表
去掉的话就用JS实现吧...

别的..要求太过苛刻,如果不放弃IE6的话,很难实现.

说得很好，要知道css不是万能的，再加上ie6实在太多bug了。
其实用js显示也很不错，代码会简单得多，也不必使用大量的hack。

我爱阿仙奴！

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作

25^# 大中小发表于 2008-6-4 22:47

发布一个较完美方案，兼容ie6,ie7,FF,不用触发怪异模式。

这个方案经测试还有有问题，所以删了！

[ 本帖最后由 zidanezhicong 于 2008-6-5 11:12 编辑 ]

我爱阿仙奴！

TOP

yj511 [楼主]

不再等待

中级会员

帖子: 202
体力: 383
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作,JS

26^# 大中小发表于 2008-6-4 23:34

ok,楼上的好强！上面的代码滚动条有点问题！

继续进阶，来一个超难的(相对于我自己来说)。

JS就可以，不用纯CSS，当然可以实现的话就更好了：）

注意： 右边的滚动条还要，但是不包括下面那个300*100的块！

[ 本帖最后由 yj511 于 2008-6-4 23:37 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

niey117

新手上路

帖子: 18
体力: 42
威望: 0
离线: 1 天

27^# 大中小发表于 2008-6-5 09:51

我想请教一下，就是在前几个可以运行的代码，在定义header的样式时，定义了position:relative; z-index:1;
为什么要定义这个position:relative; z-index:1;呢？

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 580
体力: 578
威望: 0
当前: 北京海淀区

专长 前端制作

28^# 大中小发表于 2008-6-5 10:11

引用:

原帖由 zidanezhicong 于 2008-6-4 22:47 发表
发布一个较完美方案，兼容ie6,ie7,FF,不用触发怪异模式。

[html]

固定头和底，中间部分如何自适应

*{margin:0px;padding:0px;}
html,body{height:100%;width:100%;overflow:hidden;}
#header{height: ...

你的这个我在IE7了看不到滚动条最下面的按钮
你再看看

这就是签名吗

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳

专长 前端制作