Holy Grail 圣杯布局详解

2024-04-10 09:58
文章标签 布局 详解 圣杯 holy grail

本文主要是介绍Holy Grail 圣杯布局详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Introduction

I’m sorry. Really. I didn’t name it. I don’t mean to overstate its importance or trivialize the other and rather weightier Holy Grails.

But the name’s out there, and we all know what it means.

Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.

Many articles have been written about the grail, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout.

A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility. It will:

1.have a fluid center with fixed width sidebars,
2.allow the center column to appear first in the source,
3.allow any column to be the tallest,
4.require only a single extra div of markup, and
5.require very simple CSS, with minimal hacks patches.

On the shoulders of giants

The technique presented here is inspired by Alex Robinson’s brilliant One True Layout. Alex even addressed the Holy Grail problem in his article, but his solution requires two wrappers and makes padding difficult without a further layer of divs within each column.

Another lead came from Eric Meyer’s adaptation that uses positioning to mix multiple unit types. His example also yields a three-column layout with fixed sidebars and a liquid center. Unfortunately, it relies on approximate percentages and fills a portion of the viewport that varies widely with different screen resolutions.

Enough talk—let’s see some code

The required HTML is intuitive and elegant.

(For the sake of clarity in demonstrating this technique, we are intentionally using the non-semantic ids “center,” “left,” and “right.” We recommend you use semantic ids in any application of this technique. —Ed.)

<div id="header"></div>
<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
<div id="footer"></div>

That’s it. A single extradiv to contain the columns is all that you need; this satisfies even my obsessive compulsive markup habits.

The stylesheet is almost as simple. Let’s say you want to have a left column with a fixed width of 200 pixels and a right column with a fixed width of 150 pixels. To simplify the comments, I’ll abbreviate the left, right, and center columns as LC, RC, and CC, respectively. The essential CSS is here:

body {min-width: 550px;      /* 2x LC width + RC width */
}
#container {padding-left: 200px;   /* LC width */padding-right: 150px;  /* RC width */
}
#container .column {position: relative;float: left;
}
#center {width: 100%;
}
#left {width: 200px;          /* LC width */right: 200px;          /* LC width */margin-left: -100%;
}
#right {width: 150px;          /* RC width */margin-right: -150px;  /* RC width */
}
#footer {clear: both;
}
/*** IE6 Fix ***/
* html #left {left: 150px;           /* RC width */
}

Simply replace the values with your desired dimensions and the grail is yours. The technique works in all modern browsers: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6. IE5.5 support would require at least a box-model hack, which is left as an exercise to the reader.

Take a look and marvel at the elegance.

How it works

The strategy is straightforward. The container div will have a liquid center and fixed-width padding on the side. The trick is then to get the left column to line up with the left padding and the right column with the right padding, leaving the center column to fill the liquid width of the container.

Let’s build this up step by step.

STEP 1: CREATE THE FRAME

Start with the header, footer, and container.

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

We pad the container with the width we want our left and right columns to occupy.

#container {padding-left: 200px;   /* LC width */padding-right: 150px;  /* RC width */
}

Our layout now looks like this:
在这里插入图片描述

STEP 2: ADD THE COLUMNS

Now that we have our basic frame, we’ll stick in the columns.

<div id="header"></div>
<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
<div id="footer"></div>

Next we add the appropriate widths and float them to get them in line. We’ll also need to clear the footer to keep it beneath the floated columns.

#container .column {float: left;
}
#center {width: 100%;
}
#left {width: 200px;  /* LC width */
}
#right {width: 150px;  /* RC width */
}
#footer {clear: both;
}

Note that the 100% width on the center column refers to the width of the container div, exclusive of the padding. We’ll see this 100% width again as the layout comes together, and it will still refer to this central width of the container.

The columns now want to line up in order, but because the center column is taking up 100% of the available space, the left and right columns wrap.
在这里插入图片描述

STEP 3: PULL THE LEFT COLUMN INTO PLACE

The only thing left is to get the colums to line up with the padding on the container. The center column starts exactly where it needs to be, so we’ll focus on the left column.

It takes two steps to get the left column in place. First, we’ll pull it all the way across the center column with a 100% negative margin. Remember that the 100% refers to the central width of the container, which is also exactly the width of the center column.

#left {width: 200px;        /* LC width */margin-left: -100%;  
}

Now the left column is overlapping the center column, sharing its left edge. The right column floats left and nestles against right edge of the center column (but still wraps), leaving us with the following:
在这里插入图片描述
To push the left column the rest of the way over, we’ll use relative positioning with an offset that’s exactly the width of the left column.

#container .columns {float: left;position: relative;
}
#left {width: 200px;        /* LC width */margin-left: -100%;  right: 200px;        /* LC width */
}

The rightproperty pushes it 200px away from the right edge; that is, to the left. Now the left column lines up perfectly with the left padding of the container.
在这里插入图片描述

STEP 4: PULL THE RIGHT COLUMN INTO PLACE

The only task remaining is to pull the right column into place. To do that, we just need to pull it out of the container and into the container’s padding. We’ll again use a negative margin.

#right {width: 150px;          /* RC width */margin-right: -150px;  /* RC width */
}

Everything is now in its right place, and the wrapping disappears.
在这里插入图片描述

STEP 5: DESIGN DEFENSIVELY

If the browser window is resized so that the center becomes smaller than the left column, the layout breaks in a standards-compliant browser. Setting a min-width on the body keeps your columns in place. With IE6 this doesn’t happen, so the fact that it doesn’t support min-width isn’t a problem.

body {min-width: 550px;  /* 2x LC width + RC width */
}

Of course, no layout technique would be complete without requiring some sort of workaround in Internet Explorer. The negative margin pulls the left column too far to the left in IE6 (the full width of the browser window). We need to push it back to the right the full width of the right column—using the star-html hack to mask it from other browsers—and we’re ready to go.

* html #left {left: 150px;  /* RC width */
}

The reason we need to use the width of the right column involves a bit of algebra. I won’t bore you with the details; you can work it out for yourself or just consider it another one of IE’s many charms.

Padding, please

I’m no designer, but looking at the layout above offends even my aesthetic sensibilities. The unpadded columns are hard on the eyes and difficult to read. We need whitespace.

One of the drawbacks of using percentages with the One True Layout to create liquid columns that it makes padding the columns a bit tricky. Percentage paddings tend to look bad at some screen widths. Fixed paddings can be added, but only by cluttering the markup with a div nested inside each column.

With this technique, padding isn’t a problem. Padding can be added directly to the left and right columns; just adjust the width accordingly. To give a 10-pixel padding to the left column in the example above, but keep it’s full width (padding + width) at 200px, simply change the rule as follows:

#left {width: 180px;        /* LC fullwidth - padding */padding: 0 10px;right: 200px;        /* LC fullwidth */margin-left: -100%;
}

Padding the center requires a little more ingenuity, but no more markup and only a pinch of additional CSS.

The padding plus a width of 100% causes the center column to expand beyond the non-padded width of the container. In order to tame it back into place, we need to increase the right margin by the total amount of the padding. This ensures that the center column is only as large as we expect it to be.

Also, since the center column is now wider, the left column has a larger distance to move in order to get to the correct place. Increasing the offset by the total center padding does the trick.

To make this concrete, I’ll modify the example to add a 10-pixel padding to each side column (for a total of 20 pixels), and a 20-pixel padding to each side of the center (for a total of 40 pixels). The new CSS looks like this:

body {min-width: 630px;      /* 2x (LC fullwidth +CC padding) + RC fullwidth */
}
#container {padding-left: 200px;   /* LC fullwidth */padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {position: relative;float: left;
}
#center {padding: 10px 20px;    /* CC padding */width: 100%;
}
#left {width: 180px;          /* LC width */padding: 0 10px;       /* LC padding */right: 240px;          /* LC fullwidth + CC padding */margin-left: -100%;
}
#right {width: 130px;          /* RC width */padding: 0 10px;       /* RC padding */margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {clear: both;
}/*** IE Fix ***/
* html #left {left: 150px;           /* RC fullwidth */
}

Of course, top and bottom padding can be added without any problems. See this nicely padded version for the full template.

This technique works just as well for ems. Unfortunately, you can’t mix-and-match ems and pixels, so choose, but choose wisely.

Equal-height columns

This technique really comes together when the columns are given equal heights. The method I’m using is adapted wholesale from the One True Layout, so I won’t go over it in detail. To deploy it, simply add the following CSS:

#container {overflow: hidden;
}
#container .column {padding-bottom: 20010px;  /* X + padding-bottom */margin-bottom: -20000px;  /* X */
}
#footer {position: relative;
}

Here, I’ve given the columns an extra padding of 10px on the bottom.

The usual caveats apply. Be aware that Opera 8 has a bug withoverflow: hidden that leaves all of your columns huge. A workaround is detailed on the One True Layout page; you can use that, or wait for Opera 9 (which fixes the bug) to come out of beta.

One additional problem unique to this layout is that IE doesn’t clip the column backgrounds at the bottom of the container. They spill out over the footer if the page is not as tall as the viewport. This isn’t a problem if you don’t have a separate footer, or if your pages are tall enough to ensure that you’ll always take up the whole viewport.

If you need that footer, though, never fear. This, too, is fixable, but requires one more div. Add a wrapper to the footer, like so:

<div id="footer-wrapper"><div id="footer"></div>
</div>

Now re-use the same trick with the equal columns to make the footer wrapper extend beyond the page, leaving the footer itself for you to do with as you please.

* html body {overflow: hidden;
}
* html #footer-wrapper {float: left;position: relative;width: 100%;padding-bottom: 10010px;margin-bottom: -10000px;background: #fff;         /* Same as body background */
}

This solves the problem, and leaves us with the desired result and a minimum of cruft.

Oh, and there’s one more thing

The extremists out there might be wondering to themselves whether there’s not an even better way to do this. After all, the method I’ve illustrated introduces a non-semantic container div. Surely we can’t have one extra div cluttering up our otherwise flawless markup.

If you, like me, have been wondering this very thing, wonder no more. As a special bonus, I present to you the wrapper-free Holy Grail, in all its minimalist glory. One div for each section of the code—no more, no less. Semantic bliss, almost worthy of the title of “Holy Grail.”

The principle behind the CSS is the same. The padding has been applied directly to the body, eliminating the need for any containers. Negative margins stretch the header and footer to ensure that they take up the entire space.

This tiny version works in all the aforementioned browsers, even (almost shockingly) Internet Explorer. Equal-height columns do not work, however, and this layout will break down for very small window widths. Use it with caution.

So what now?

While this particular application of the Holy Grail is rather specific, the technique can be generalized considerably. Why not have two liquid columns? Why not switch up the column orders? These applications are beyond the scope of this article, but achievable with minor modifications. Use the grail wisely, and it can be a particularly handy (and clutter-free) addition to your bag of CSS tricks.

Article source

Matthew Levine

这篇关于Holy Grail 圣杯布局详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/890738

相关文章

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注