基本可以重用CSS布局

分享于 

6分钟阅读

Web开发

  繁體

注意[: 这个解决方案在 Opera。Safari和其他一些低配置浏览器中都不适用。 最可能的是,它唯一不能正常工作的部分是修改后的框模型( IE vs 其他所有人)。 你可以通过在标准模式下呈现网站来工作,并告诉 IE 它应该做相同的事情。

从个人角度来看,我从来没有考虑过 IE 和 Firefox 之外的任何东西。 我的所有客户都认为没有使用 Firefox 或者 IE的2 -4%,即使是他们也可以访问 Firefox 或者 IE。 ( 我可以听到 Lynch mob的pitchforks和手电筒。)

你可以通过修改这些代码来修改这些浏览器,让我知道,并且我将通过这项繁琐的工作为你提供你应得的信用,

介绍

我经常发现自己对各种项目执行相同的布局代码。 几乎总是,我尝试使用guid使用CSS呈现的站点布局,看起来像这样:

 baselayout.gif

在 IE 和 Firefox 中进行这种布局是不重要的,而且几乎总是引起头痛。 在本文中,我提供了一个基本布局,可以根据任何项目进行调整。

布局涉及几个常见元素: 一个 header,两个完整的列和一个页脚。 要让这个布局正常工作,需要解决几个令人沮丧的问题。

基本 div

第一 件 事 要 做 的 是 实际 创建 的 html, 我们 将 通过 css 操作. 基本的HTML如下所示:

<divid="Wrapper"><divid="Header"></div><divid="Column"></div><divid="Content"></div></div><divid="Footer"></div>

IE vs 其他人

接下来,我们将 IE 呈现的问题与其他人的表现不同。 为此,我们在CSS工作表中包含以下定义:

Div{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

这实际上告诉 Firefox 使用与 IE 相同的方式呈现 <div> s,这是非标准的,但是更直观。

100%的min-height

好了现在我希望网站呈现的方式。 接下来,我们希望站点的主要内容在 100%高度或者 GREATER 处呈现。 为此,我们将以下元素添加到我们的CSS中:

#Wrapper 
{display: table;border: solid 3px #4160D5;margin: auto;width: 800px;height: 100%;padding-bottom: 47px;}

这里要注意的是 display:tableheight:100%display:table 项告诉 Firefox 呈现 #Wrapper 元素,就好像呈现 table 一样,这意味着它将扩展以适合它的子元素。 height:100% 指定 #Wrapper 元素至少是浏览器窗口的全高度。

相同高度列

在同一高度下,使列呈现在同一高度是真正痛苦,只是使用div和 CSS。 有一个称为伪列的解决方案,它涉及使用平铺 background 图像模拟列。 我不喜欢那个解决方案。 因此,在一段时间谷歌搜索,我碰到一个更合适的解决办法。

我们所做的就是让列大大,并告诉它们包含元素以隐藏过多的列空间。 这需要对我们的CSS进行一些修改。 首先,我们将以下内容添加到我们的CSS列项目中:

padding-bottom: 32767px;margin-bottom: -32767px;

这样做的方法是使用 padding 将列的底部下降,然后使用负 margin 再次使用一个负的。 基本上,这会创建一个大列,其中包含大量未使用的空间- browser浏览器的空间 knows unused unused。 现在,我们将以下内容添加到我们的CSS中:

html>body #Wrapper {overflow:hidden;}

这基本上告诉 Firefox 容器( #Wrapper ) 是隐藏子容器中所有未使用的空间。 由于某些原因,如果你在容器上指定 overflow:hidden,那么IE7无法正常工作,因此我们将这一行专门用于 Firefox。

Dern页脚

最后, 我们 希望 我们 的 尾 挂 在 页面 底部 了. 我们使用下面的CSS定义来实现:

#Footer{margin: auto;background: #D66C43;margin-top: -50px;height: 50px;width: 800px;border: solid 3px #4160D5;border-top: 0;color: #FFF;}

你将注意到它的margin-top 设置为它的高度的负值。 没有这个,页脚将在屏幕底部下沉。 这将它恢复到适当的位置。 我们还希望页脚与我们的主包装元素相同,并且使用自动页边距,以使 Firefox 中心。

还应该注意,页脚现在将被填充到页面的主要内容中。 我们不希望这样,所以我们将 padding 添加到包装器( 如果你滚动回包装器CSS代码,你会注意到它已经存在)的底部。

呼 !

就是这样,你可以下载源代码来获得完整的图片并开始操纵你想要的方式。 我在 Firefox 和IE7的最新版本中进行了测试。 它目前正被用于我的博客。 特别感谢 alistapart,这是一个不断有用的网站。 我相信他们会讨厌我的解决方案,但这一点并不重要。 另外,我也要感谢写了这篇文章的作者。


相关文章