随笔-42  评论-578  文章-1  trackbacks-0

DIV+CSS布局,应用越来越普遍,小的个人主页、大的门户网站,很多都采用了DIV+CSS布局。在设计过程中,有时会遇到一些问题,要注意一下。且看下面的网页截图:

未命名

从截图中, 我们可看出,

问题1:右边的内容多时,会导致左边露空白;或者左边内容多时,会导致右边露空白。怎么解决?

问题2:右边那一大块层的宽度应该设置多少呢?设置小了,会与右边界不对齐,设置大了,整块层会被挤到下一行去。怎么办?

其实,两个问题,都可归结到同一个问题,即如何使得层的高度或宽度达到自适应的效果?

且看下面的HTML和CSS代码,详细讲解在CSS代码注释中:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
<title>New Web Project</title>
        
<link rel="stylesheet" type="text/css" href="index.css" />
    
</head>
    
<body>
        
<div id="container">
            
<div id="header"></div>
            
<div id="middleBody">
                
<div id="sider" class="column">
                    
<p>心梦帆影</p>
                    
<p>心梦帆影</p>
                
</div>
                
<div id="content" class="column">
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>
                    
<p>http://www.blogjava.net/rongxh7</p>                    
                
</div>
            
</div>
            
<div id="footer"></div>
        
</div>
    
</body>
</html>


body {
    margin-top
:0px;    /* 去除网页上边空白 */
}
/* 大容器,包含下面所有层 */
#container 
{
    width
:800px;
    margin
:0px auto;    /* 居中 */
}
/* 头部 */
#header 
{
    width
:100%;
    height
:100px;
    background
:#FFE1FF;
}
/* 中部,包括左边区(sider)和右边内容区(content) */
#middleBody 
{
    width
:100%;
    overflow
:hidden;    /* 隐藏超出的部分 */
}
/* 左边 */
#sider 
{
    width
:200px;
    float
:left;
    background
:#FFE4E1;
}
/* 右边主内容区 */
#content 
{
    
/* 此两行是#content自适应宽度的关键,旨在与右边界对齐,且不被挤到下面去 */
    padding-right
:10000px;
    margin-right
:-10000px;
    float
:left;
    background
:#FFFAF0;
}
/* #sider和#content共同属性,此为自适应高度的关键,旨在#sider和#content下边界对齐,且不会露白*/
.column 
{
    padding-bottom
:20000px;
    margin-bottom
:-20000px;
}
/* 底部 */
#footer
{
    clear
:left;    /* 防止float:left对footer的影响 */
    width
:100%;
    height
:80px;
    background
:#FFE4B5;
}

运行截图如下:

image



本文原创,转载请注明出处,谢谢!http://www.blogjava.net/rongxh7(心梦帆影JavaEE技术博客)
    

posted on 2009-12-14 02:19 心梦帆影 阅读(10288) 评论(7)  编辑  收藏 所属分类: Web前端开发

评论:
# re: DIV+CSS布局中自适应高度和宽度 2009-12-14 08:58 | everybody
其实不用那么夸张:
column 可以不用
middleBody 和sider 使用同样的背景颜色
sider和content分别使用20%和80%的宽度属性,基本可以达到同样的效果

试试看  回复  更多评论
  
# re: DIV+CSS布局中自适应高度和宽度 2009-12-14 11:12 | 久久书城
看见的撒看计算机的  回复  更多评论
  
# re: DIV+CSS布局中自适应高度和宽度 2009-12-14 21:36 | 仁心博客
学习了  回复  更多评论
  
# re: DIV+CSS布局中自适应高度和宽度[未登录] 2009-12-26 18:28 | 小人物
@everybody
这样的话不觉得太勉强了吗?如果需求sider和content不同的背景颜色呢?  回复  更多评论
  
# re: DIV+CSS布局中自适应高度和宽度 2012-10-12 18:06 | 快乐嘟嘟
你这样会产生一个问题就是content内容过多的时候,比如文字大过content内容宽度时候会被飘到下面,建议把content的float去掉 然后加上margin-left:200px;  回复  更多评论
  
# re: DIV+CSS布局中自适应高度和宽度 2013-08-18 12:29 | 柏菲娜
学习了  回复  更多评论
  
# re: DIV+CSS布局中自适应高度和宽度[未登录] 2015-08-12 10:26 | qq
这样的话content就会露白。@快乐嘟嘟
  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: