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

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

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


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




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





主信息区域

正文内容

正文内容

次信息区域

正文内容

功能服务区域
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项

浏览器效果截图:
在HTML中利用CSS设计多栏高度自适应页面_第1张图片
伪列布局.png

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

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

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





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




主信息区域

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

次信息区域

正文内容

功能服务区域
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项

浏览器效果截图:


在HTML中利用CSS设计多栏高度自适应页面_第2张图片
边界补白重叠法.png

但是这种方法只能够根据中间栏目的高度来裁切,也就是说overflow:hidden;声明对于流动或浮动元素有效,对于脱离文档流的绝对定位元素来说无法进行裁切,从而导致如果绝对定位的栏目高度高出中间流动布局栏目的高度时,就会被裁切掉。
为了避免此类问题发生,不能使用定位法布局页面,应用简单的浮动发进行设计,改动的核心样式如下(方法三),这样就可以实现上述3列自适应高度的版式效果。

方法三(绝对定位改浮动):





设计多栏高度自适应页面_补白边界重叠法_绝对定位改浮动



主信息区域

正文内容

正文内容

次信息区域

正文内容

功能服务区域
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项
服务列表项

浏览器效果图:

在HTML中利用CSS设计多栏高度自适应页面_第3张图片
绝对定位改浮动.png

声明:此文只代表个人见解,只供参考!联系QQ:1522025433

你可能感兴趣的:(在HTML中利用CSS设计多栏高度自适应页面)