將同胞增長到浮動列的高度

Question

我有一個3列的布局，側面的列都具有固定的寬度，中間的列會增長以適應剩余的空間。 我有一個明確的解決方法，可以強制父容器達到其最高列的高度。

如果其中任何一個較高，我想使中心列也增長以匹配浮動列的高度，但是我不知道該如何實現。

HTML的結構如下：

<main>
    <nav id="left"></nav>
    <aside id="right"></aside>
    <section id="center"></section>

    <div class="clearfix"></div>
</main>

使用以下CSS：

main {
    display: block;
    border-bottom: 1px solid red;
    background: #FFFFFF;
    width: 100%;
    min-width: 960px;
    margin: 0 auto;
}

#left {
    float: left;
    width: 192px;
}

#right {
    float: right;
    width: 288px;
}

#center {
    border-left: 1px solid red;
    border-right: 1px solid red;
    overflow: hidden;
}

.clearfix {
    clear: both;
}

http://jsfiddle.net/nfxLcp44/

我嘗試將height: 100%添加到中心CSS，但這沒有用。

Answer 1

您想要實現的是人造色譜柱

因此，還有幾種方法可以實現您想要的。 您可以在此處查看更多信息，並在此處查看演示

在上面的鏈接中，您將找到這些方法來實現您的要求：

• 道格·尼納法（五欄）
• Doug Neiner方法（三列，寬度不同，源順序已更改）
• CSS表
• 實際表
• 尼古拉斯·加拉格爾（Nicolas Gallagher）方法
• 一種真實的布局方法

根據您的示例，我使用了CSS TABLE解決方案，該解決方案類似於已經存在的代碼。

 main { display: table; background: #FFFFFF; width: 100%; min-width: 960px; margin: 0 auto; table-layout: fixed; /* this might me optional, further reading here https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout */ } .cell { display: table-cell; border: 1px solid red; padding: 1% /* demo purposes */ } #left { width: 192px; } #right { width: 288px; border-left: 0; /*delete double borders */ border-right:0 /*delete double borders */ } 

 <main> <nav id="left" class="cell"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </nav> <aside id="right" class="cell">Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</aside> <section id="center" class="cell">Vestibulum tortor quam, feugiat vitae,</section> </main> 

注意：此答案基於我自己對另一個問題的答案，您可以在這里找到

Answer 2

最簡單的方法是使用CSS顯示div之類的表格。 這是改進的代碼。 （注意html div順序和CSS的更改）。

 /* This isn't in my production code, this is just a quick and dirty reset for on JSFiddle */ * { padding: 0; margin: 0; box-sizing: border-box; } main { display: table; border-bottom: 1px solid red; background: #FFFFFF; width: 100%; min-width: 960px; margin: 0 auto; } #left, #center, #right { padding: 1rem; display: table-cell; } #left { width: 192px; } #right { width: 288px; } #center { border-left: 1px solid red; border-right: 1px solid red; overflow: hidden; } #left .menu { list-style: none; } .clearfix { clear: both; } } 

 <main> <nav id="left"> <ul class="menu"> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> </ul> </nav> <section id="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section> <aside id="right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </aside> </main>