61,115
社区成员
发帖
与我相关
我的任务
分享DIV 如何实现页头、主体（分左右）、页脚这样的布局？
DIV 如何实现页头、主体（分左右）、页脚这样的布局？
我要实现这样的布局该怎么写 DIV ？
http://access911.net/csdn/filedescription.asp?mdb=2007-4-15&id=41
上述图片中有两种布局，请分别告知如何用 DIV + CSS 布局？
我现在的网页在
http://access911.net/csdn/filedescription.asp?mdb=2007-4-15&id=41
有下载
我的网页现在显示格式错误，如下图，该如何修正？
http://access911.net/csdn/filedescription.asp?mdb=2007-4-15&id=42
我要实现这样的布局该怎么写 DIV ？
http://access911.net/csdn/filedescription.asp?mdb=2007-4-15&id=41
上述图片中有两种布局，请分别告知如何用 DIV + CSS 布局？
我现在的网页在
http://access911.net/csdn/filedescription.asp?mdb=2007-4-15&id=41
有下载
我的网页现在显示格式错误，如下图，该如何修正？
http://access911.net/csdn/filedescription.asp?mdb=2007-4-15&id=42
...全文
请发表友善的回复…
发表回复
whb147 2007-04-18
- 打赏
- 举报
还是用js最后控制一下吧
wanjun830 2007-04-17
- 打赏
- 举报
去网页设计师网站看看~《网站重构》的译者吧？！！
zhujiazhao123 2007-04-17
- 打赏
- 举报
http://community.csdn.net/Expert/topic/5427/5427179.xml?temp=.35693
changechange 2007-04-16
- 打赏
- 举报
<div id=header></div>
<div id=mainbody>
<div id=left></div>
<div id=right></div>
</div>
<div id=header></div>
然后用样式表去控制。
---------这个回答比较搞笑，我就是问 CSS 的代码呀，DIV 谁不会写呀？
<div id=mainbody>
<div id=left></div>
<div id=right></div>
</div>
<div id=header></div>
然后用样式表去控制。
---------这个回答比较搞笑，我就是问 CSS 的代码呀，DIV 谁不会写呀？
stou 2007-04-16
- 打赏
- 举报
<div id=header></div>
<div id=mainbody>
<div id=left></div>
<div id=right></div>
</div>
<div id=header></div>
然后用样式表去控制。
<div id=mainbody>
<div id=left></div>
<div id=right></div>
</div>
<div id=header></div>
然后用样式表去控制。
changechange 2007-04-16
- 打赏
- 举报
IE6 测试了一下，用 min-height:100% 未能解决
changechange 2007-04-16
- 打赏
- 举报
我这里主要要保证 IE 6 IE7
飘零雾雨 2007-04-16
- 打赏
- 举报
在FF下，使用min-height可以解决一定的问题，貌似IE7也支持。
changechange 2007-04-16
- 打赏
- 举报
2、使用嵌套（只是想应该可以，没真的去做） －－－－－－－套嵌了一下，好像没啥效果，是不是套嵌好了设定 height:100% ?
cat_hsfz 2007-04-16
- 打赏
- 举报
要主体内多栏高度“看起来”一致，就不要为各栏独立设置background，而是直接设置主体的background，并且主体最后要clear: both，这就行了。
飘零雾雨 2007-04-16
- 打赏
- 举报
高度不一致的解决方法：
1、使用背景平铺
2、使用嵌套（只是想应该可以，没真的去做）
3、JS控制
1、使用背景平铺
2、使用嵌套（只是想应该可以，没真的去做）
3、JS控制
changechange 2007-04-16
- 打赏
- 举报
storm0(飘零雾雨.闻弦歌而知雅意,顾叶落而晓秋至)
-------------非常感谢你提供的代码，主体左右栏的高度不统一的问题改如何解决呢？
-------------非常感谢你提供的代码，主体左右栏的高度不统一的问题改如何解决呢？
changechange 2007-04-16
- 打赏
- 举报
zcwmxn(千里猪) ----------我已经提供了所有代码和图片的链接，你看见了么？
dh20156 2007-04-16
- 打赏
- 举报
顶storm0!
飘零雾雨 2007-04-16
- 打赏
- 举报
http://community.csdn.net/Expert/topic/5427/5427179.xml?temp=.35693
leohuang 2007-04-16
- 打赏
- 举报
<!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>
<title>css</title>
<style>
body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #EBD3E0;
}
#banner {
background-color: #e1ddd9;
text-align: right;
padding: 0px;
margin: 0px;
}
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 200px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }
</style>
</head>
<body>
<div id="container">
<div id="banner" >banner
</div>
<div id="left">
left
</div>
<div id="content">
<pre>
content
</pre>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css</title>
<style>
body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #EBD3E0;
}
#banner {
background-color: #e1ddd9;
text-align: right;
padding: 0px;
margin: 0px;
}
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 200px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }
</style>
</head>
<body>
<div id="container">
<div id="banner" >banner
</div>
<div id="left">
left
</div>
<div id="content">
<pre>
content
</pre>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
bottoline 2007-04-16
- 打赏
- 举报
学习。帮顶。
yokibear 2007-04-16
- 打赏
- 举报
嘿嘿,才看到你的显示格式错误的样子.加一个clear的空div就OK喔.不妨试试上面的代码.
yokibear 2007-04-16
- 打赏
- 举报
(没仔细,代码写得不太规范:<)
box里的大写定位可以解决IE对div的显示问题哦,确保div 显示在中间.
box里的大写定位可以解决IE对div的显示问题哦,确保div 显示在中间.
yokibear 2007-04-16
- 打赏
- 举报
test.html:
<LINK href="div.css" type="text/css" rel=stylesheet>
<div id="box">
<div id="head">页头</div>
<div id="left">左面主体</div>
<div id="right">右面主体</div>
<div id="food">页脚</div>
<div id="clear"></div>
</div>
div.css:
#box{
width:780px;
border:#fcc 1px solid;
POSITION:relative;
LEFT:50%;
MARGIN-LEFT:-390px;
}
#head{
width:100%;
background:#ccc;
}
#left{
float:left;
width:200px;
background:#cdf;
}
#right{
float:left;
background:#cfd;
}
#food{
width:100%;
float:left;
background:#ebc;
}
#clear{
clear:both;
}
主体左右高度不统一,把最外层DIV的背景色设成与左右主体相同就可以啦.这个效果不知道是不是你想要的:>
<LINK href="div.css" type="text/css" rel=stylesheet>
<div id="box">
<div id="head">页头</div>
<div id="left">左面主体</div>
<div id="right">右面主体</div>
<div id="food">页脚</div>
<div id="clear"></div>
</div>
div.css:
#box{
width:780px;
border:#fcc 1px solid;
POSITION:relative;
LEFT:50%;
MARGIN-LEFT:-390px;
}
#head{
width:100%;
background:#ccc;
}
#left{
float:left;
width:200px;
background:#cdf;
}
#right{
float:left;
background:#cfd;
}
#food{
width:100%;
float:left;
background:#ebc;
}
#clear{
clear:both;
}
主体左右高度不统一,把最外层DIV的背景色设成与左右主体相同就可以啦.这个效果不知道是不是你想要的:>
加载更多回复（2）
