BlogJava-心梦帆影Java技术博客-随笔分类-Web前端开发

DIV+CSS布局中自适应高度和宽度

心梦帆影 — Sun, 13 Dec 2009 18:19:00 GMT

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 Projecttitle>
        <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/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                    <p>http://www.blogjava.net/rongxh7p>
                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;
}

运行截图如下：

心梦帆影 2009-12-14 02:19 发表评论

Div+CSS布局的宽度计算及在各浏览器中的差异比较

心梦帆影 — Sun, 13 Dec 2009 16:39:00 GMT

对比于传统的表格布局和框架布局，DIV+CSS布局有着布局容易、改版方便、样式定义灵活、HTML代码简洁清晰、易于JavaScript操控等优点。在众口皆碑的同时，对于一些初学者，总会遇到各种各样的问题，比如说DIV的宽度或高度的计算问题。

我们来探讨一下影响DIV宽度或高度的属性有哪些？

DIV的宽度 = width + padding + border + margin

仅从一条公式上看，可能有点难理解，我们通过测试代码和截图来观察一下。为了测试结果观察直观，我们只测试一边，即左边，即本来padding、border、margin的宽度计算，都是左右两边都算在内的，这里就只测试左边，右边同理。

xml version="1.0" encoding="UTF-8" ?>
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>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>测试DIV的宽度title>
        <style type="text/css">
            #container {
                /* 左参考线 */
                border-left:1px solid #B23AEE;
            }
            /* 定义各个层的公共属性 */
            #div1,#div2,#div3,#div4{
                width:200px;
                height:50px;
                background:#FFE1FF;
                margin-bottom:5px;
            }
            /* 只有width */
            #div1{
            }
            /* 加上border */
            #div2{
                border-left:10px solid red;
            }
            /* 加上border和padding */
            #div3{
                border-left:10px solid red;
                padding-left:50px;
            }
            /* 加上border、padding和margin */
            #div4{
                border-left:10px solid red;
                padding-left:50px;
                margin-left:50px;
            }
        style>
    head>
    <body>
        <div id="container">
            <div id="div1">
                心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
            div>
            <div id="div2">
                心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
            div>
            <div id="div3">
                心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
            div>
            <div id="div4">
                心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
            div>
        div>
    body>
html>

我们在Firefox中测试，截图如下：

我们来分析一下DIV4，如下图：

对照上面的代码和截图，我们可以清楚地理解“div的宽度 = width + padding + border + margin”这条公式。

对于Web前端开发者来说，最头痛的事情就是因浏览器的差异而引起的网页显示效果的差异，而对于这条宽度计算公式，在其他浏览器中会不会有不兼容的问题呢？

幸好，大部分常用的浏览器，我机器上都安装了，测试结果是：在Firefox、Opera、Google、IE8、IE7显示都跟上面的截图一样，也就是说，在这些浏览器中，宽度的计算公式是：

DIV的宽度 = width + padding + border + margin

而在IE6中测试，结果却不是这样，请看运行截图：

由上图可以看出，在IE6的宽度计算是：

DIV的宽度 = width + margin

而border和padding，是占用了width的位置。这一点，在前端开发中要注意。

心梦帆影 2009-12-14 00:39 发表评论

CSS的position:fixed的使用

心梦帆影 — Sun, 22 Nov 2009 06:58:00 GMT

接触CSS已有相当长一段时间，我们竟然没有留意position:fixed的用法。

我们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间，在做一个项目时需要使一个层相对于浏览器边框固定，那时用position:absolute试了下，发觉absolute是对网页边框而言的。后来，上网查了一些根据滚动条的移动，动态地改变left和top的值的JavaScript语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。

且看下面的代码：

我们用上面这段代码来定义页面上的一个层“help”（id=“help”）。这样就能实现我们想要的效果了。

在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。

心梦帆影 2009-11-22 14:58 发表评论