DIV+CSS布局中自适应高度的解决方法

2022-03-12 22:48:00

div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>)

float 是个很危险的东西

得小心使用

本来有一很好的关于CSS+DIV的论坛

不过现在关门了

甚是可惜了

给段比较好的讲布局的东西给你看看吧

反正我看了是受益非浅，希望你能参悟

由于是要让站工自已定制，所以开放了HTML以及CSS、JS等代码。但默认的CSS是CSS是不能改的。在写这个CSS时，我尽量用最少的标签，这样很站对CSS不是很熟的站长也可以定制。另外布局时和写CSS时，总的思想的就是从大的到小，从小到细。这个布局和CSS是一次写成的，没有更改过，所以有一些地主还是可以优化的，这样的代码也不是最优的。但是，这样的布局的CSS是可以让站长定义成各式各样的。一会我给大家看一些例子。以下是这个CSS的解析，很合适于初学者看。

程序代码

@charset "utf-8";

/*定义全局,在这定义了全局中的标签*/

* {margin:0px;padding:0px;}

/* 在这里定义了全局的文字大小为12PX,行高180%;这样的行高看起来眼睛不会太累。在这里，我把宋体放在了Verdana字体的后边，是为了中页面中的数字和英文能以英文字体显示，这样会漂亮一些；有些人不加宋体，但这样会有问题的，最起码我的测试结果是这样的。另外，我加了背景色，是因为在某些操作系统下的某些浏览器中，如果要不加背景，那么他的背景就会是其它的色。我在这里还定义了整体文字色。没有用黑色是为了让眼睛舒服一些；最重要的一些为是加了textalign；这个是让BODY中的内容全是居中，与里边一个大的DIV块合用，就可以实在如果页面内容是定宽的，那么在IE 和FIREFOX等浏览器中内容总在网页的中间，主要是为了解决IE和FIREFOX中的差别，这里把文字弄成居中，然后我们再在BODY中加一个大的 DIV块，把这个DIV的块写成文字左对齐， */

body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#666;}

/* 这里定义了全局的文字链接样式，我用了简写的形式，样式是和客齐集主站是一样的 */

a:link,a:visited{color:#000099; text-decoration: underline;}

a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;}

/* 由于布局中将会用到很多的UL和LI，而UL和LI本身的样式并不好看，所以在这里我们去除列表小点以及边距等 */

ul,li{ list-style:none; margin:o;}

/* 这里定义图片的边模框为0，这里全局定义一下。后边有加边框的，另外再加，主要的思想还是从大到小。 */

img{ border:0;}

/* 这个是就包在BODY里的最大也是最外边的一个DIV块，有了就可以控制整个网页内容的宽度了。与BODY合用，就可以实现自动居中了。定义整个网站的宽度和水平居中 1、这里定义了文字全部为左对齐。 2、用MARGIN来实现在FIREFOX中居中。 3、用OVERFLOW是担心有些人定义的内容会太宽而影响了布局。所以缢出就自动隐藏了； */

#wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;}

/* INFO这里又加了一个宽为百分百的DIV块，加他是为了让有些站长可以把布局定制成全屏的，右边定宽，左边自动适用而加的。并是解决一行两列的的前题基础。这里我加了FLOAT，是为了“以毒攻毒”就是用浮动来解决浮动。因为右边也要加浮动； */

#info{ width:100%; float:left; }

/* 这里是导航条用BODER来加上边的绿色 */

#nav{width:100%; text-align:center; border-top:5px solid #5DB30A; background:#FAFAFA; line-height:2.2}

/* 这里用了绝对定位，因为一共有三个以上的页面要用这个，很有可能他会受其它内容的影响，所以就定义为绝对定位，这样基本上不会受到影响。 bykijiji的图片位置 */

#bykijiji{position: absolute; margin-left:550px; margin-top:-20px;}

/* 主体大块*/

#main{text-align:left;margin:0 auto;}

/*底部大块*/

#footer{border-top:1px solid #CDCDCD; padding:10px 0; clear:both; text-align:center;margin:0 auto;}

/*头部大块*/

#header{ clear:both}

/* 这里定义了HEADER区标题文字的大小。色彩等。主要是为了让站长直接加文字LOGO就可以了。标题*/

#header h2{ font-size:35px; margin-top:0px; font-weight:bold; color:#404040}

/* 以下LEFT和RIGHT是完成一行两列布局为。我在LEFT外边加了一个INFO。是为什么让定制更灵活一些，可以实现页面适度自动适应。左边大块这里的LEFT距右边305PX，由于他外边有一个百分之百的DIV。所以，这样就给右边一列留下了305的宽度。就样LEFT就可以自适应了。 */

#left{ margin-right:305px;color:#000; font-size:14px;}

/*这个是LEFT里边的一个最大的DIV。这个是为是解决不同版本浏览器对PADDING的解释和计算的方法的不同*/

leftbox{ padding:10px; font-size:14px;}

/* 右边大块由于他前边的INFO的宽已经是百分百了，而里边的LEFT又给他留了一个305PX的空子。所以让他距左边负的305PX就正好和LEFT挨上了。在这里写了300PX，是和左边大块离开5PX；这样看上去更舒服。这里我定义了宽是289PX；再加上PADDING左右的各5PX；是299PX；为了安全，我少写一个像素。 */

#right{ margin-left:-300px; float:left; width:289px; padding:5px;background:#F7F7F7； margin-top:24px;}

/* 这是搜索那一条，没有什么好说的。搜索那一条*/

#search{ padding:0 0 10px 0; text-align:left}

/*定义标题文字大小*/

h1{ font-size:16px;}

/* 在这里，定议了公用的三个CSS，他们都是布局中常用的。分别为水平换行，左浮动和右浮动这样命名很简单，而且字符最短，这样论在CSS文件中，还是页面中，最能作到代码尽量少。 */

.c{clear:both; height:0px; overflow:hidden;} .l{ float:left;} .r{ float:right;}

/*这里定义了一个文字大小，由于上边定义的很多都是12PX；可能或一定会有部分地方要用小字的，所以提前写在这里。*/

.f12{ font-size:12px;}

/*这义SMALL的文字大小。*/

small{font-size:12px;color:#999;font-weight: normal; padding-left:5px;} .h_hr{ height:1px; overflow:hidden; margin:10px 5px; background:#CDCDCD;}

/*++++++++++++++++++++++++++++++++++++++++++++++++++ 以上就是定义的全局。然后在下边又分别对首页，LIST页面，以及单个信息的页面作了单独的CSS；可以看出，用了上边的基础，下边单个页面CSS写起就方便多了。而且只要很少的代码就可以了。可能首页的代码会多一些；下边的这些就不一一说明了。很简单的东西。 */

/*单个页面部分*/

.imgbox{ text-align:center; width:200px;} .imgbox img{ border:4px solid #CCC; display:block; margin:0 auto; } .navbox{border-left:4px solid #f5f5f5; margin:5px 0 10px 0; padding-left:8px; }

/*LIST页面部分*/

#listnav{ background:#f7f7f7; line-height:2.0; padding-left:10px; border-bottom:1px solid #D4D4D4;}

.listbox{ color:#666;width:590px;font-size:12px;border-bottom: 1px dashed #CCC;}

/*绿色的时间*/

.listbox p{color: #008000;}

/*大标题*/

#leftbox h2{font-size:14px; margin-top:10px;}

#leftbox span{ margin-left:10px;}

/*首页页面部分*/

#h_center_l{ width:66%; border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD; float:left; margin-top:10px;}

#h_center_lbox{width:49%; border-right:1px solid #CDCDCD; float:left;}

#h_center_lboxb{width:50%; float:right;}

#h_center_r{width:33%; float:right;margin-top:10px;}

#h_center_l h1,#h_center_r h1{ padding-left:5px; font-size:14px;}

#h_center_l ul,#h_center_r ul{ padding-left:19px; font-size:12px;}

#qcity{clear:both; margin-bottom:20px; margin-top:10px;}

#qcity li{ display:inline; padding-left:10px;}

#qcity h3{ font-size:14px; color:#000}

#links { border-top: 1px solid #CCC; margin-top: 15px; }

/*广告块部分*/

#leftbottomad{ background:#FFFFCC; margin-left:10px; display:none}

#pfm{padding:20px; font-size:12px;}

/*CSS完*/

说一说我个人在写布局和CSS的一点感受吧！说明，只是个人的感受！ 1、了解用户群，如果你的用户是白领都是学生。那么你没有必要去考虑IE5以下的版本。那样你会累死的。 2、一行三列或一行二列自动适应，这个例子就可以了，他在IE6，IE7，FIREFOX等的效果都是一样的。没有必要有一堆代码去写一个自动适应。 3、布局最难的就是布表单了。表单中的元素太多了，很难控制，特别是要适应很多浏览器。这个是更难了。如果将来我遇到表单，如果不是非常简单的，那么我一定用表格，我想信，复杂的表单用表格去布局，代码一定会小于那个人家常说的DIV+CSS。而且有表格布这东西，维护特别的容易。 4、在CSS设计的时间，总的来说，是标签从大到小来定义，布局从大块到小块。标签不一定用到很多。 5、有些人认为不要给那些DIV或块加上什么ID；我认为，加ID是正确的，如果ID中有不同的标签，那么通过CSS来控制就在容易了。有时我们会认为一些同样的色彩应该写在一个CLASS里。然后哪里用到那么我们就在哪里调，如果变色，一改这个CLASS就全变了。但是，我想问，如果不全变呢，只变一块，你怎么办。还去改布局吗？如果是这样，那么结构和表现分开又有什么意义呢。 6、我们布大局可能会很简单，就像盖房子，大的样子几天就起来。但细细装修就麻烦了，又苦又累。我们常常分为了一个像素，节省一行代码而浪费大量的时间在上边，我感觉时间还是要花的，但是要有一个度。 7、布局时，我们也许把布局和CSS都弄的很NB。但同事一时半会看不懂你为什么要这样写，这样多人开发就很难了。你写的东西可能只有你能改。这样就麻烦了。所以，我们不一定非要布局写的很NB。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>

body{

padding: 0;

margin: 0;

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

line-height: 140%;

text-align: center;

background:#E7DFD3;

}

#wrap{

width: 750px;

margin: 0 auto;

overflow: hidden;

}

#header{

background: #E8E8E8;

}

#sideleft{

width: 580px;

float: left;

background: #FFF;

text-align: left;

}

#sideright{

width: 170px;

float: left;

background: #F0F0F0;

text-align: left;

}

#wrap:after

{

content: '[DO NOT LEAVE IT IS NOT REAL]';

display: block;

height: 0;

clear: both;

visibility: hidden;

}

#wrap

{

display: inline-block;

}

#wrap

{

display: block;

}

/* end easy clearing */

/*\*/

#sideleft, #sideright

{

padding-bottom: 32767px !important;

margin-bottom: -32767px !important;

}

@media all and (min-width: 0px) {

#sideleft, #sideright

{

padding-bottom: 0 !important;

margin-bottom: 0 !important;

}

#sideleft:before, #sideright:before

{

content: '[DO NOT LEAVE IT IS NOT REAL]';

display: block;

background: inherit;

padding-top: 32767px !important;

margin-bottom: -32767px !important;

height: 0;

}

#footer{

background: #E8E8E8;

width: 100%;

float: left;

}

h1,h2,address,p{

margin: 0;

padding: .8em;

}

h1,h2{font-size: 20px;}

</style>

</head>

<body>

</div>

<h2>sideleft</h2>

<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

</div>

<h2>sideright</h2>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

</div>

Footer

</address>

码农公寓

div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>)

相关文章