具有最小高度的等高流体柱

Question

我正在尝试制作两个栏目 - 侧栏和内容。

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

（黑色边框是浏览器视口）

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

有谁知道怎么做？这件事让我发疯了

Answer 1

您应该可以使用此处列出的方法执行此操作 - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

这是一种获得相同高度列而无需显示的技术：table，Javascript或images，并且在所有浏览器中一直很适合我。

#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/

Answer 2

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

Answer 3

有时你必须妥协。

<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>

是的，这是古老的讨厌，但有时这就是你留下的东西，直到IE用户将自己拖入21世纪。