最小高度的等高流體柱

我試圖製作兩欄 - 側欄和內容。最小高度的等高流體柱

每列的最小高度應該是視口的高度。
我不知道哪一列會更高
左欄寬度應該是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

最小高度的等高流體柱

回答

相關問題