100分 DIV 布局问题

atsiang 2009-11-12 10:20:02

找了一个DIV布局如下：



<!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" id="html">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

*{

	margin:0;

	padding:0;

}

html{

	padding:0;

	_padding:100px 0 0 200px;

	width:100%;

	height:100%;

	overflow:hidden;

}

body{

	_padding:100px 0 0 200px;

	_padding:/**/0;

	height:100%;

	overflow:hidden;

}

#left{

	position:absolute;

	top:0;

	left:0;

	overflow:auto;

	_padding-bottom:100px;

	width:200px;

	height:100%;

	background:#eee;

	text-align:center;

	line-height:1000px;

}

#header{

	position:absolute;

	top:0;

	right:0;

	left:200px;

	width:auto;

	_width:100%;

	height:100px;

	background:#ccc;

	line-height:100px;

	text-align:center;

}

#middle{

	position:relative;

	position:/**/absolute;

	top:0;

	top:/**/100px;

	right:0;

	bottom:0;

	left:0;

	left:/**/200px;

	overflow:auto;

	width:auto;

	_width:100%;

	height:auto;

	_height:100%;

	background:#ffc;

	text-align:center;

	line-height:1000px;

}

#middle p{

	text-align:left;

	line-height:normal;

}

.hide-left{_padding-left:0;}

.hide-left body{_padding-left:0;}

.hide-left #left{display:none;}

.hide-left #header{left:0;}

.hide-left #middle{left:0;}

.hide-header{_padding-top:0;}

.hide-header body{_padding-top:0;}

.hide-header #left{_padding-bottom:0;}

.hide-header #header{display:none;}

.hide-header #middle{top:0;}

</style>

<title>DIV 布局</title>

</head>

<body>

<div id="left">页左</div>

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

<div id="middle">

  <p>

    <input type="button" value="隐藏 left" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-left')<0?(html.className+(html.className.length>0? ' ': '')+'hide-left'):html.className.replace(new RegExp('( ?|^)hide-left\\b'),'');this.value=(this.value=='隐藏 left')?'显示 left':'隐藏 left'" />

    <input type="button" value="隐藏 header" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-header')<0?(html.className+(html.className.length>0? ' ': '')+'hide-header'):html.className.replace(new RegExp('( ?|^)hide-header\\b'),'');this.value=(this.value=='隐藏 header')?'显示 header':'隐藏 header'" />

    <input type="button" value="实时查看<html>样式" onclick="alert(document.getElementById('html').className)" />

  </p>

  页中 </div>

</body>

</html>

根据需要新加了两个div如下:



<!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" id="html">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

*{

	margin:0;

	padding:0;

}

html{

	padding:0;

	_padding:140px 0 0 200px;

	width:100%;

	height:100%;

	overflow:hidden;

}

body{

	_padding:140px 0 0 200px;

	_padding:/**/0;

	height:100%;

	overflow:hidden;

}

#top {

position:absolute;top:0; left:0; width:100%;  height:80px; overflow:auto;

	background-color: #666699;

}

#left{

	position:absolute;

	top:80px;

	left:0;

	overflow:auto;

	_padding-bottom:100px;

	width:200px;

	height:100%;

	background:#eee;

	text-align:center;

	line-height:100px;

}

#header{

	position:absolute;

	top:80px;

	right:0;

	left:200px;

	width:auto;

	_width:100%;

	height:60px;

	background:#ccc;

	line-height:60px;

	text-align:center;

}

#middle{

	position:relative;

	position:/**/absolute;

	top:0;

	top:/**/140px;

	right:0;

	bottom:0;

	left:0;

	left:/**/200px;

	overflow:auto;

	width:auto;

	_width:100%;

	height:auto;

	_height:100%;

	background:#ffc;

	text-align:center;

	line-height:1000px;

	padding:0 0 24px 0;

}

#middle p{

	text-align:left;

	line-height:normal;

}



#status{

	position:absolute;

	bottom:0;

	width:100%;

	height:24px;

	overflow:auto;

	background-color: #CCCCCC;

}



.hide-left{_padding-left:0;}

.hide-left body{_padding-left:0;}

.hide-left #left{display:none;}

.hide-left #header{left:0;}

.hide-left #middle{left:0;}

.hide-header{_padding-top:80px;}

.hide-header body{_padding-top:80px;}

.hide-header #left{_padding-bottom:0;}

.hide-header #header{display:none;}

.hide-header #middle{top:80px;}

</style>

<title>DIV 布局</title>

</head>

<body>

<div id="top">顶</div>

<div id="left">页左</div>

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

<div id="middle">

  <p>

    <input type="button" value="隐藏 left" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-left')<0?(html.className+(html.className.length>0? ' ': '')+'hide-left'):html.className.replace(new RegExp('( ?|^)hide-left\\b'),'');this.value=(this.value=='隐藏 left')?'显示 left':'隐藏 left'" />

    <input type="button" value="隐藏 header" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-header')<0?(html.className+(html.className.length>0? ' ': '')+'hide-header'):html.className.replace(new RegExp('( ?|^)hide-header\\b'),'');this.value=(this.value=='隐藏 header')?'显示 header':'隐藏 header'" />

    <input type="button" value="实时查看<html>样式" onclick="alert(document.getElementById('html').className)" />

  </p>

  页中 </div>

<div id="status">状态</div>

</body>

</html>

问题出来了，有三个问题：
1、top 右边有问题
2、middle与status之间有问题，middle流动条在status下了
3、再加下button隐藏status

由于小弟水平有限，请各位大侠调一下

...全文

250 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

xb520hh 2009-11-20

打赏
举报

路过帮顶下

bo523 2009-11-20

打赏
举报

这里有DIV+CSS的标准布局
http://alibobo.5d6d.com/thread-30-1-1.html

atsiang 2009-11-20

打赏
举报

zqtoo 2009-11-16

打赏
举报

help up ding

weiyingsong0221 2009-11-15

打赏
举报

html简单啊

weiyuanzbh 2009-11-15

打赏
举报

up up!!!

路伊阑珊 2009-11-15

打赏
举报

[Quote=引用 2 楼 kendyjack 的回复:]
哦，有个要改一下
.hide-status #middle{_height:100%;}
这个改为
.hide-status #middle{_height:96%;margin-bottom:0px;}
[/Quote]

<input type="button" value="隐藏 left" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-left')<0?(html.className+(html.className.length>0? ' ': '')+'hide-left'):html.className.replace(new RegExp('( ?|^)hide-left\\b'),'');this.value=(this.value=='隐藏 left')?'显示 left':'隐藏 left'" />

这句话能不能给分析一下

路伊阑珊 2009-11-15

打赏
举报

强支持

xtgopl 2009-11-15

打赏
举报

太高深了!

byte377 2009-11-13

打赏
举报

路过帮顶

夜雨_Jason 2009-11-12

打赏
举报

哦，有个要改一下
.hide-status #middle{_height:100%;}
这个改为
.hide-status #middle{_height:96%;margin-bottom:0px;}

夜雨_Jason 2009-11-12

打赏
举报

如此



<!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" id="html">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

*{

    margin:0;

    padding:0;

}

html{

    padding:0;

    _padding:140px 0 0 200px;

    width:100%;

    height:100%;

    overflow:hidden;

}

body{

    _padding:140px 0 0 200px;

    _padding:/**/0;

    height:100%;

    overflow:hidden;

}

#top {

position:absolute;top:0; left:0; width:100%;  height:80px; overflow:auto;

    background-color: #666699;_width:200%;

}

#left{

    position:absolute;

    top:80px;

    left:0;

    overflow:auto;

    _padding-bottom:100px;

    width:200px;

    height:100%;

    background:#eee;

    text-align:center;

    line-height:100px;

}

#header{

    position:absolute;

    top:80px;

    right:0;

    left:200px;

    width:auto;

    _width:100%;

    height:60px;

    background:#ccc;

    line-height:60px;

    text-align:center;

}

#middle{

    position:relative;

    position:/**/absolute;

    top:0;

    top:/**/140px;

    right:0;

    bottom:0;

    left:0;

    left:/**/200px;

    overflow:auto;

    width:auto;

    _width:100%;

    height:auto;

    _height:92%;

    background:#ffc;

    text-align:center;

    line-height:1000px;

    padding:0 0 24px 0;

	margin-bottom:24px;



	

}

#middle p{

    text-align:left;

    line-height:normal;

}



#status{

    position:absolute;

    bottom:0;

    width:100%;

    height:24px;

    overflow:auto;

    background-color: #CCCCCC;

}



.hide-left{_padding-left:0;}

.hide-left body{_padding-left:0;}

.hide-left #left{display:none;}

.hide-left #header{left:0;}

.hide-left #middle{left:0;}

.hide-header{_padding-top:80px;}

.hide-header body{_padding-top:80px;}

.hide-header #left{_padding-bottom:0;}

.hide-header #header{display:none;}

.hide-header #middle{top:80px;}

.hide-status #status{display:none;}

.hide-status #middle{_height:100%;}

</style>

<title>DIV 布局</title>

</head>

<body>

<div id="top">顶</div>

<div id="left">页左</div>

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

<div id="middle">

  <p>

    <input type="button" value="隐藏 left" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-left')<0?(html.className+(html.className.length>0? ' ': '')+'hide-left'):html.className.replace(new RegExp('( ?|^)hide-left\\b'),'');this.value=(this.value=='隐藏 left')?'显示 left':'隐藏 left'" />

    <input type="button" value="隐藏 header" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-header')<0?(html.className+(html.className.length>0? ' ': '')+'hide-header'):html.className.replace(new RegExp('( ?|^)hide-header\\b'),'');this.value=(this.value=='隐藏 header')?'显示 header':'隐藏 header'" />

    <input type="button" value="实时查看<html>样式" onclick="alert(document.getElementById('html').className)" />

	<input type="button" value="隐藏 status" onclick="var html=document.getElementById('html');html.className=html.className.indexOf('hide-status')<0?(html.className+(html.className.length>0? ' ': '')+'hide-status'):html.className.replace(new RegExp('( ?|^)hide-status\\b'),'');this.value=(this.value=='隐藏 status')?'显示 status':'隐藏 status'" />

  </p>

  页中 </div>

<div id="status">状态</div>

</body>

</html>