两列的高度与最深列相同？ [英] Both columns same height as deepest column?

问题描述

如果我有这样的div布局：

 < div id =stretchyheader>< / div> ; 
< div id =fixedwidthwide>< div> 
< div id =fixednarrow>< / div> 
< div id =footer>< / div> 
  
 
 
 
这样做：
  ------------------------------------------------ 
 | stretchyheader | 
 ----------------------------------------- ------------ 
 | | | 
 | | | 
 | fixedwidthwide | fixednarrow | 
 | | | 
 | | | 
 | | -------------- 
 | | 
 | | 
 | |模式
 | |背景
  - ---------------------- 
  -  footer  -  
  
如何确保两列的高度与最深的列相同？ 
解决方案
这是一个非常简单的常见方式这是使用仿列。
 
 
 
您的结构应该是这样的：
 < div id =stretchyheader> div> 
< div id =container> 
< div id =fixedwidthwide>< / div> 
< div id =fixednarrow>< / div> 
< / div> 
< div id =footer>< / div> 
  
你实际上应用了一个背景图像到 #container  
 
 
 
有没有伪造它的CSS技术，但是它们要复杂得多：
 
 
 
 
 
  http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks  
 
 
  http://matthewjamestaylor.com/blog/ultimate-2-column-right -menu-pixels.htm  
 
 
  http://www.socialgeek.be/blog/read/flexible-equal-height-columns  
 
 
 
If I have a div layout like this:
<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>
Which makes something like this:
-----------------------------------------------------
|          stretchyheader                           |
-----------------------------------------------------
      |                     |              | 
      |                     |              | 
      |    fixedwidthwide   |  fixednarrow |
      |                     |              | 
      |                     |              | 
      |                     | --------------
      |                     |             
      |                     |             
      |                     |       patterned          
      |                     |       background
      -----------------------
                    -  footer  -
How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.
解决方案
A very simple, common way to do this is using Faux Columns.

You would have a structure that looked something like this:
<div id="stretchyheader"></div>
<div id="container">
    <div id="fixedwidthwide"></div>
    <div id="fixednarrow></div>
</div>
<div id="footer"></div>
And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.

There are CSS techniques to do this without faking it, but they are much more complex:


http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
http://www.socialgeek.be/blog/read/flexible-equal-height-columns


                        
这篇关于两列的高度与最深列相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！