打印

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

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

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

由于ie6，不得不使用expression，其实就是变相的使用js，消耗资源大不大就没测试，什么时候ie6会淘汰啊！

<!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%;width:100%;overflow:hidden;}
#header{height:65px;background:#000;}
#wrap{
position:absolute;
top:65px;
bottom:30px;
width:100%;
_position:raletive;
}
#contentWrap{
height:100%;
_height:expression(document.body.offsetHeight-65-30 + "px");
position:absolute;
left:0;
right:300px;
background:green;
}
#content{margin:5px;}
#sidebar{
width:300px;
_height:expression(document.body.offsetHeight-65-30-100 + "px");
position:absolute;
right:0;
top:0;
_top:65px;
bottom:100px;
background:white;
overflow:auto;
}
#sidebarContent
{
margin:2px; 
border:blue solid 1px;
}
#other
{
width:300px;
height:100px;
position:absolute;
right:0;
bottom:0;
_bottom:28px;
background:orange;
}
#footer
{
width:100%;
height:30px;
position:absolute;
bottom:0;
_bottom:-2px;
background:#999;
}
</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 id="other"></div>
</div>
<div id="footer"></div>
</body>
</html>

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

我爱阿仙奴！

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

yj511 [楼主]

不再等待

中级会员

帖子: 204
体力: 389
威望: 0
当前: 北京海淀区

专长 前端制作,JS

32^# 大中小发表于 2008-6-5 11:25

复制内容到剪贴板

代码:

一觉睡醒我以为你把IE6给搞定了呢

看来不用JS，IE6是没办法搞定了。。。

郁闷啊

10月份IE8又出来了。。。

呵呵，不管用什么方法，只要能以最简单、实用来实现，那就是好方法！

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

TOP

美橙vps独立IP月付189元

yj511 [楼主]

不再等待

中级会员

帖子: 204
体力: 389
威望: 0
当前: 北京海淀区

专长 前端制作,JS

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

<!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">
<img src="http://www.zcool.com.cn/pic/desktop1/118/chahua20080513_006.jpg" width="100%" height="100%" /></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>

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

我插了一张大图，为什么设成100%宽和高的时候，布局就变了？

要求是不管左边有多大，但是永远和右边一样高，不会撑开底下。因为我左边是放一个虚拟地图（效果类似google,微软地图）的插件。

无论内容怎么变都是全屏的。

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

TOP

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

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

34^# 大中小发表于 2008-6-5 11: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=gbk" />
<title>design by zidanezhicong</title>
<style type="text/css">
*{margin:0px;padding:0px;}
html,body{height:100%;width:100%;max-width:100%;overflow:hidden;}
#wrap{height:100%;}
#header{height:65px;background:#000;}
#contentWrap{width:100%;float:left;margin-left:-300px;}
#content{margin-left:300px;overflow:auto;}
#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("content").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">
<img src="http://www.zcool.com.cn/pic/desktop1/118/chahua20080513_006.jpg" width="100%" 
height="100%" /></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-5 12:04 编辑 ]

我爱阿仙奴！

TOP

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

yj511 [楼主]

不再等待

中级会员

帖子: 204
体力: 389
威望: 0
当前: 北京海淀区

专长 前端制作,JS

35^# 大中小发表于 2008-6-7 19:46

点击隐藏左边内容，中间的层到最左边？

现在的问题是：中间的还在原地不动，哪位能帮忙解答一下？谢谢了！

代码如下：

<!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%; overflow:hidden}
#wrap{height:100%;}
#header{height:65px;background:#000;}
#contentWrap { width:100%; float:left; margin-left:-312px; }
	#content { margin-left:312px; overflow:hidden; }
.fullscreenctr { width:10px; float:left; height:100%;}
	.fullscreenctr .click { position: absolute; top: 50%; cursor:pointer }
	.fullscreenctr p {position:static;	+position:absolute;	top:50%	}
	.fullscreenctr img {position:static;+position:relative;	top:-50%;vertical-align:middle	}
	*+html .fullscreenctr img { left:0; width:10px; height:10px;}
	.fullscreenctr p:after {	content:".";font-size:1px;	visibility:hidden}
#sidebar { width:300px; border:#bdd1ec solid 1px; float:right; overflow:scroll; overflow-x:hidden; }
	#sidebarContent { margin:2px; }
#footer{height:30px;background:#ccc;margin-top:-30px;}
</style>
</head>
<body>
<div id="wrap" class="clear">
  <div id="header"></div>
  <div id="contentWrap">
    <div id="content"> <img src="http://www.zcool.com.cn/pic/desktop1/118/chahua20080513_006.jpg" width="100%" height="100%" /></div>
  </div>
  <div class="fullscreenctr">
    <div class="click"><p><img src="http://online.sccnn.com/icon/891/Mazes_Mini_021.png" alt="" id="splitter" /></p></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>
<script type="text/javascript">
var __isRightHide = false;
function $$(id)
{
	return document.getElementById(id);
}
//获取视口的高度和宽度。	
function windowHeight() 
{
    var de = document.documentElement;
    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}
function windowWidth() 
{
    var de = document.documentElement;
    return self.innerWidth||(de && de.clientWidth)||document.body.clientWidth;
}
window.onload=window.onresize=function() 
{
	var wh=windowHeight();
	document.getElementById("content").style.height=(wh-65-30)+"px";
	document.getElementById("sidebar").style.height=(wh-65-30)+"px"; 
	if(__isRightHide)
	{
		var w = windowWidth() - 10;
		$$("content").style.width =  w + "px";
	}
	else
	{
		var w = windowWidth() - 312;
		$$("content").style.width =  w + "px";	
	}
}
var splitter = document.getElementById("splitter");
splitter.onclick = function()
{
	__isRightHide = ($$("sidebar").style.display == "none");
	if(__isRightHide)
	{
		$$("sidebar").style.display = "block";
		var w = windowWidth() - 312;
		$$("content").style.width =  w + "px";
		__isRightHide = false;		
	}
	else
	{
		$$("sidebar").style.display = "none";
				var w = windowWidth() - 10;
		$$("content").style.width =  w + "px";
		__isRightHide  = true;
	}
}
</script>
</body>
</html>

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

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

36^# 大中小发表于 2008-6-7 22: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;
}
img {
	border:none;
}
html, body {
	height:100%;
	overflow:hidden
}
#wrap {
	height:100%;
}
#header {
	height:65px;
	background:#000;
}
#contentWrap {
	min-width:100%;
	_width:100%;
	float:left;
	margin-left:-312px;
}
#content {
	margin-left:312px;
	overflow:hidden;
}
#fullscreenctr {
	width:10px;
	float:left;
	height:100%;
}
#splitter {
	width:10px;
	height:10px;
	display:block;
}
#sidebar {
	width:300px;
	border:#bdd1ec solid 1px;
	float:right;
	overflow:scroll;
	overflow-x:hidden;
}
#sidebarContent {
	margin:2px;
}
#footer {
	height:30px;
	background:#ccc;
	margin-top:-30px;
}
</style>
</head>
<body>
<div id="wrap" class="clear">
  <div id="header"></div>
  <div id="contentWrap">
    <div id="content"> <img src="http://www.zcool.com.cn/pic/desktop1/118/chahua20080513_006.jpg" width="100%" height="100%" /></div>
  </div>
  <div id="fullscreenctr"> <a href="#" id="splitter"><img src="http://online.sccnn.com/icon/891/Mazes_Mini_021.png" alt="splitter"  width="10" height="10" /></a> </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>
<script type="text/javascript">
var _isRightHide = false;
function $(id)
{
	return document.getElementById(id);
}
//获取视口的高度和宽度。	
function windowHeight() 
{
    var de = document.documentElement;
    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}
function windowWidth() 
{
    var de = document.documentElement;
    return self.innerWidth||(de && de.clientWidth)||document.body.clientWidth;
}
window.onload=window.onresize=function() 
{
	var wh=windowHeight();
	$("content").style.height=(wh-65-30)+"px";
	$("sidebar").style.height=(wh-65-30)+"px";
	$("splitter").style.marginTop=(wh-65-30)/2+"px";
	if(_isRightHide)
	{
		var w = windowWidth() - 10;
		$("content").style.width =  w + "px";
	}
	else
	{
		var w = windowWidth() - 312;
		$("content").style.width =  w + "px";	
	}
}
var splitter = document.getElementById("splitter");
splitter.onclick = function()
{
	if(_isRightHide)
	{
		$("sidebar").style.display = "block";
		var w = windowWidth() - 312;
		$("content").style.width =  w + "px";
		_isRightHide = false;		
	}
	else
	{
		$("sidebar").style.display = "none";
		var w = windowWidth() - 10;
		$("content").style.width =  w + "px";
		_isRightHide  = true;
	}
}
</script>
</body>
</html>

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

我爱阿仙奴！

TOP

tudou527

地瓜

初级会员

帖子: 123
体力: 170
威望: 1
当前: 浙江杭州
离线: 1 天

37^# 大中小发表于 2008-6-8 14:47

纯CSS版本，学习这贴的写法：Html+CSS 构建 B/S结构软件界面 -- 布局篇 -- position方式。IE6&7、FF、Safari、Opera下貌似都行得通。不知道是不是你要的效果：

<?xml version="1.0" encoding="UTF-8"?>
<!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=utf-8" />
<title>demo</title>
<style type="text/css">
* {margin:0px;padding:0px;}
html, body {height:100%;overflow:Hidden}
html > body {position:absolute;top:0;left:0;bottom:0;right:0;height:auto;width:auto;}
#main {_padding:60px 0px;width:100%;height:100%; background:#000000}
#top {position:absolute;top:0px;left:0px;height:60px;width:100%;background:red;overflow:hidden;}
#middle {width:100%;height:100%;background:blue;}
#main>#middle {position:absolute;left:0px;top:60px;bottom:60px;height:auto;}
#middle .left {_padding:0px 300px 0px 0px;width:100%;height:100%;background:#999;overflow:hidden;}
#middle>.left {position:absolute;left:0;top:0;right:300px;bottom:0;width:auto;background:#333;}
#middle .right {position:absolute;right:0;top:0;_top:60px;bottom:0;width:300px;height:100%;background:green;}
#middle .right .right_top{_padding-bottom:100px;width:100%;height:100%;background:#000000;color:#fff;overflow-y:auto;}
#middle>.right>.right_top{position:absolute;left:0px;top:0px;right:0px;bottom:100px;width:100%;background:#FF00FF;}
#middle .right .right_down {position:absolute;left:0px;right:0px;bottom:0px;width:100%;height:100px;background:#33FF00;overflow:hidden;}
#bottom {position:absolute;left:0px;bottom:0px;width:100%;height:60px;background:yellow;overflow:hidden;}
</style>
</head>
<body   >
<div id="main">
    <div id="top">top--></div>
    <div id="middle"> 
       <div class="left">left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left-->left--></div> 
       <div class="right">
           <div class="right_top">right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br />right_top--><br /></div>
           <div class="right_down">right_down--></div>
       </div>       
    </div>
    <div id="bottom">bottom--></div>
</div>
</body>
</html>

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

[ 本帖最后由 tudou527 于 2008-6-8 14:53 编辑 ]

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

38^# 大中小发表于 2008-6-8 18:44

回复 tudou527 在 37# 的帖子

这是触发怪异模式的写法，我自己也写过一个，不过不太推荐！

我爱阿仙奴！

TOP