css-tips/holy-grail-layout.html at master · vanzheng/css-tips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>圣杯布局</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font: 12px "\5b8b\4f53", Arial, tahoma, sans-serif;
        color: #000000;
    }
    .wrapper {
        width: 100%;
    }
    .hf{
        min-height: 200px;
        background-color: #666;
        font-size: 30px;
        line-height: 60px;
        text-align: center;
        color: #fff;
    }
    .clearfix:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;
        /* IE6, IE7 hack */
    }
    /* 方式一布局样式 */
    .container {
        padding-left: 150px;
        padding-right: 200px;
        clear: both;
    }
    .container .column {
        float: left;
        min-height: 500px;
        font-size: 20px;
        line-height: 36px;
        color: #fff;
    }
    .column {
        position: relative;
        float: left;
    }
    #left {
        width: 150px;
        background-color: #3366FF;
        margin-left: -100%;
        right: 150px;
    }
    #center {
        width: 100%;
        background-color: #CCCC66;
    }
    #right {
        width: 200px;
        background-color: #FF9933;
        margin-right: -200px;
    }

    /* 方式二布局样式 */
    .container2 {
        padding-left: 150px;
        padding-right: 200px;
        clear: both;
        position: relative;
    }
    .container2 .column2 {
        min-height: 500px;
        font-size: 20px;
        line-height: 36px;
        color: #fff;
    }
    #left2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        background-color: #3366FF;
    }
    #center2 {
        width: 100%;
        background-color: #CCCC66;
    }
    #right2 {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        background-color: #FF9933;
    }
    </style>
</head>

<body>
    <h1>圣杯布局：左右两栏固定，中间一栏自适应。</h1>
    <h2>方式一: 采用margin负值来定位</h2>
    <div class="wrapper">
        <div id="header" class="hf">header</div>
        <div class="container clearfix">
            <div id="center" class="column">content</div>
            <div id="left" class="column">left sidebar</div>
            <div id="right" class="column">right sidebar</div>
        </div>
        <div id="footer" class="hf">footer</div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h2>方式二：左右两栏采用绝对定位，中间一栏width: 100%</h2>
    <div class="wrapper">
        <div id="header2" class="hf">header</div>
        <div class="container2 clearfix">
            <div id="center2" class="column2">content</div>
            <div id="left2" class="column2">left sidebar</div>
            <div id="right2" class="column2">right sidebar</div>
        </div>
        <div id="footer2" class="hf">footer</div>
    </div>
</body>

</html>