设置html页面高度自适应,在HTML中利用CSS设计多栏高度自适应页面

最新推荐文章于 2024-08-14 19:32:44 发布

琅邪杨文理

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量408

点赞数

文章标签：设置html页面高度自适应

方法一：伪列布局法(利用背景图)

所谓伪列布局法，就是设计一个背景图像，利用背景图像来模拟栏目的背景。如，使用Photoshop设计一个长方形的背景图，长度与页面宽度保持一致，高度任意。

代码中要用到的背景图：

d286cfbbd006

bg.gif(代码中背景图 800*77)

设计多栏高度自适应页面_伪列布局法

* {

margin: 0;

padding: 0;

}

body { text-align: center; }

#model {

width: 800px;

margin-left: auto;

margin-right: auto;

text-align: left;

}

#header { background: #FF00FF; }

#main {

position: relative;

width: 100%;

background: url(images/bg.gif) center repeat-y

}

#content {

margin-left: 25%;

margin-right: 20%;

}

#subplot {

width: 20%;

position: absolute;

right: 0;

top: 0;

}

#serve {

width: 25%;

position: absolute;

left: 0;

top: 0;

}

#footer {

background: #FF99FF;

}

/*解决#subplot #serve 因绝对定位脱离文档流，使#mian包含框的高度就为#content的高

度，此脚本会使#mian的高度为三个子栏最高的一栏的高度

即#serve的高度；*/

window.onload = function(){

var main = document.getElementById("main");

// 定义即将控制的外框div

var left = document.getElementById("subplot").offsetHeight;

// 获得内部三栏中ID = subplo的div高度

var right = document.getElementById("serve").offsetHeight;

// 获得内部三栏中ID = serve的div高度

var middle = document.getElementById("content").offsetHeight;

// 获得内部三栏中ID = content的div高度

var height = 0;

// 定义变量来储存最大值

height = left - right > 0 ? left : right;

// 数值比较

height = middle - height > 0 ? middle : height;

// 数值比较

main.style.height = height + "px";

// 设定外框div的高度为得出的最大高度

}

主信息区域

正文内容

次信息区域

正文内容

功能服务区域

服务列表项

浏览器效果截图：

d286cfbbd006

伪列布局.png

提示：在使用这种方法时，一定要确保页面宽度是固定的且与背景图的宽度一只，不能够设计为弹性页面(百分比宽度)，或宽度值为auto；

方法二：补白padding边界margin重叠法

这种设计方法的思想是设计三列栏目的底部不带为无穷大，这样在有限的窗口内都能够显示栏目的背景色，因此也就不用担心栏目高度无法自适应。然后为了避免补白过大产生的空白区域，在设计底部边界为负无穷大，从而覆盖掉多出来的补白区域，最后再在中间行包含框中定义overflow:hidden;声明剪切到多出的区域即可。

设计多栏高度自适应页面_补白边界重叠法

* {