拉伸div宽度以匹配另一个

Question

我有一个像以下html布局:

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

如果标题是固定宽度,我如何强制它拉伸以匹配正文的宽度 - 对于正文比标题更宽的情况.

Answer 1

首先,将所有内容封装divs在父级中div.这设置了一个边界,以防止某些东西divs超出其他人,并使最小宽度hack更容易使用.

<div id='container'>
  <div id='header'></div>
  <div id='body'></div>
  <div id='footer'></div>
</div>

然后,在CSS中,使用以下min-width hack使最小宽度指令适用于所有浏览器.注释中包含有关其工作原理的详细信息.请注意,当提到IE时,我的意思是IE 6-7,我相信IE 8与所有其他浏览器一样.

#header {
   min-width:800px;   /*minimum width for non-ie browsers, ignored by ie*/
   width: 100% !important; /*width will autoexpand as necassary in non-ie browsers*/
   width: 800px;  /*ie uses width as a min-width by default.*/  
   /*Also IE ignores !important and instead uses the last directive found*/
}

现在,当body div扩展到大于标题的大小时,标题将展开以匹配它.