CSS動態高地

我有三個div標籤，包裝和包裝中的兩個並排：CSS動態高地

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

我想創建其中<div id="left">標籤是可變的高度，拉伸包裝的條件。

因此，<div id="right">將擴大到包裝已成爲任何高度。

什麼CSS會完成這個？謝謝！

來源

2009-08-06 Dave Hunt

注意表象的名字，如「左」和「右」可以使事情混亂，如果你曾經更改演示文稿（如果你以後想在左邊#right什麼？）。考慮語義名稱，比如「main」和「sidebar」等，這將需要較少的維護。 – outis 2009-08-06 19:44:05

^^絕對必須在那裏同意，但我相信這只是一個例子。我希望。 – 2009-08-06 19:46:56

如果你要去使用jQuery，那麼你可以做到這一點。

$(document).ready(function(){ 
    var leftHt = $('#left').height(); 
    $('#right').css("height",leftHt); 

});

這不是CSS，但它很簡單，應該工作。至少，據我所知，CSS無法輕易做到這一點。

如果您還沒有Jquery API，只需通過上面的Javascript即可。這裏

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

工作實施例：

http://michaelpstone.net/development/dynamic-height.html

來源

2009-08-06 18:54:53

沒有什麼好的方法讓#right匹配#left已經成爲的任何東西。要做到這一點，最好的辦法可能是：

<div id="wrapper"> 
    <div id="right"></div> <!-- note that right comes before left --> 
    <div id="left"></div> 
</div>

然後有這樣的風格：

#left, #right { 
    width: 50%; /* Adjust as needed */ 
#right { 
    float: right; 
}

這樣，#right不會影響頁面的長度，但#left總是會。但是，#right仍然不會延伸到#left的長度。我不知道你有什麼理由需要延伸到＃left，但我認爲這是一個美觀的東西。我會嘗試從#left或#wrapper應用它，而不是如果您希望它一直重複下去。

例如，如果你想#left白色和紅色#right：

#left { 
    background: #fff; 
} 
#wrapper { 
    background: #f00; 
}

來源

2009-08-06 18:48:31 Karl

人造色譜柱方法描述如下： http://www.alistapart.com/articles/fauxcolumns/ – outis 2009-08-06 19:41:46

最好實際的解決方案是一個表 - 見[此SO問題]（Make Two Floated CSS Elements the Same Height）。

當然，你可以有你自己的原因沒有使用表...

來源

2009-08-06 18:58:22

表格用於表格數據！我們正處於div和javascript時代。不能總是依靠桌子來設計...... – 2009-08-06 19:01:39

-1。語義HTML勝過表示HTML。 – outis 2009-08-06 19:08:51

你是對的，在你的陳述中注意所有重要*總是*。我只在實用時才使用表格，我不在乎現在是什麼時代。我更喜歡簡單的解決方案，以適應目前流行的複雜解決方案。還要注意，使用腳本進行佈局與對非表格數據使用表格一樣錯誤。人們也可以爭辯說，堅持非表格數據的平等高度是不自然的。 – 2009-08-06 19:09:35

如果你正在嘗試做的背景什麼的，因此需要在同一高度，我建議表。這很容易。如果您必須使用div和浮動div，特別是，這篇文章介紹了我見過的唯一方式，效果很好。它是三列，但你可以修改它有兩個：

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

來源

2009-08-06 18:58:48 Norman

也許我遲到了，但它確實是簡單的事，你用純CSS描述。訣竅是讓#right絕對定位，並給它一個top和bottom爲0.這會將其拉伸至#left給出的任何高度#wrapper。這是一個完整的工作示例 - #left爲綠色，#right爲藍色，而#wrapper爲紅色，但從未見過，因爲它完全覆蓋了#left和#right。嘗試刪除bottom: 0;行，看看它沒有它的樣子。

<html lang="en"> 
    <head> 
    <title></title> 

    <style type="text/css"> 
     #wrapper { 
     background: #fdd; 
     position: relative; 
     width: 300px; /* left width + right width */ 
     } 

     #left { 
     background: #dfd; 
     width: 200px; 
     } 

     #right { 
     background: #ddf; 
     bottom: 0; 
     position: absolute; 
     right: 0; 
     top: 0; 
     width: 100px; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="wrapper"> 
     <div id="left"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p> 
     <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p> 
     </div> 
     <div id="right"> 
     <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p> 
     </div> 
    </div> 
    </body> 
</html>

來源

2009-08-06 19:36:22

+1。該死的，這就是我要說的，甚至是顏色。請注意，設置頂部和底部在IE6中不起作用（高度：100％）。這種方法的主要缺陷是#left必須比#right高。 – outis 2009-08-06 19:40:47

我不介意你的方法，但正如outis所言：「這種方法的主要缺點是#left必須比#right高。」如果右側div比左側div長，那麼在某些情況下可能會變得混亂。無論哪種方式，我認爲我不需要有我的主欄和側欄（如果這是這裏的概念）是相同的高度。我認爲這是我們都同意的。 – 2009-08-06 19:44:24

@Michael Stone - 你的JS解決方案不是有同樣的問題嗎？在這兩種情況下，我們都有效地將＃右側的高度設置爲與＃左側相同。如果'＃right'更高，它只需要'overflow'設置。 – 2009-08-06 20:26:01

回答

相關問題