最小高度的等高流体柱

我试图制作两栏 - 侧栏和内容。最小高度的等高流体柱

每列的最小高度应该是视口的高度。
我不知道哪一列会更高
左栏宽度应该是25％，或者至少可以通过媒体查询进行更改。

（黑色边框是浏览器窗口） columns

我不能使用人造列，因为我需要列的颜色是动态的。我无法使用JavaScript解决方案设置高度，因为未知大小的图像可能出现在某一列中。

有谁知道如何做到这一点？这件事让我发疯了

来源

2012-04-03 Marvin3

你应该能够做到这一点使用这里列出的方法 - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

它是越来越等高列不显示的技术：表，JavaScript或图像，并一直工作得很好我在所有浏览器中。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

    <div id="container"> 
     <div> 
      <p>Content 1</p> 
     </div> 
     <div class="col2"> 
      <p>Content 2</p> 
      <p>Content 2</p> 
      <p>Content 2</p> 
      <p>Content 2</p> 
     </div> 
    </div>

您可以轻松调整此示例以适合窗口。我希望这有帮助。

活生生的例子 - http://jsfiddle.net/spacebeers/s8uLG/3/

来源

2012-04-03 13:04:33 SpaceBeers

谢谢，这是非常有帮助的。但怎么样 - “每列的最小高度应该是视口的高度”？ – Marvin3 2012-04-03 13:45:55

如果你的容器（隐藏溢出）设置为100％，你会好起来的 - http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin – SpaceBeers 2012-04-03 13:48:54

@tMagwell：http： //jsfiddle.net/thirtydot/s8uLG/12/ – thirtydot 2012-04-03 13:51:04

有时你不得不妥协。

<style>html, body, #wrapper {min-height:100%}</style> 
<!--[ie lt 7]><style>html, body, #wrapper {height:100%}</style><![endif]--> 

<table id="wrapper"> 
    <tr> 
    <td id="col1"> 

    </td> 
    <td id="col2"> 

    </td> 
    </tr> 
</table>

是很讨厌的OLDSKOOL，但有时这就是你剩下什么，直到IE用户拖动自己进入21世纪。

来源

2012-04-03 13:13:22 SpliFF

您可以使用display:table-cell来保持相同的高度。我不确定是否希望列的组合宽度是视口的大小（这就是图片中的样子）。这里是一个example

来源

2012-04-03 13:51:47

不会downvote，但你可以用CSS来完成。旧版本的IE btw不支持显示表格单元格。 – SpaceBeers 2012-04-03 13:53:57

IE 7和显然更低。 – SpaceBeers 2012-04-03 13:55:18

如果您可以放弃对IE7及更高版本的支持，'display：table-cell'是完美的解决方案。没有JavaScript的情况下也是如此：http://jsfiddle.net/thirtydot/U2Ldb/4/。 – thirtydot 2012-04-03 13:57:10

最小高度的等高流体柱

回答

相关问题