如何在两列布局中匹配两列的高度？ [英] How do I match the height of both column in a two column layout?

问题描述

我有一个双列布局，有一列（左）和侧栏列出一些体育场馆（右），此列的内容超过内容列。

基本上我在寻找实现是使内容列与左侧列匹配。

很像我在Codepen http://codepen.io/anon/pen/iLJAe
任何有关如何做的建议都将非常感激。

提前感谢您

Stu：）

$ b

  .content {
 border：1px solid＃e8e8e8; 
 float：left; 
 margin：5em 0 0; 
 padding：1em; 
 height：100％; 
} 
 
 .sidebar {
 border：1px solid＃e8e8e8; 
 float：left; 
 margin：5em -0.1em 0; 
 padding：1em; 
 height：100％; 
} 
  

解决方案

c $ c> display：table; 属性。

首先将两个div放在一个包装器/ p>

喜欢：

 < div id =＃wrapper> ; 
< div class =content>< / div> 
< div class =sidebar>< / div> 
< / div> 
  

然后在css中，使用 display：table 到封装div和 display：table-cell; 到列divs（这将使两个div的行为像< td> code>在表中）以使它们达到相同的高度。

喜欢：

  .wrapper {
 height：100％; 
 width：100％; 
 display：table; 
 float：left; 
} 
 
 .content {
 border：1px solid＃e8e8e8; 
 margin：5em 0 0; 
 padding：1em; 
 height：100％; 
 background：red; / * for test * / 
 display：table-cell; 
} 
 
 .sidebar {
 border：1px solid＃e8e8e8; 
 margin：5em -0.1em 0; 
 padding：1em; 
 height：100％; 
 background：blue; / * for test * / 
 display：table-cell; 
} 
  

工作示例

I'm currently stuck on an design issue that has had me scratching my head for a bit too long.

I have a two-column layout with one column for content (left) and a side bar that lists some sports venues (right) and this column's content exceeds that of the content column.

Basically what I'm looking to achieve is to make the content column match the left hand column.

Much like the one I quickly did up over on Codepen http://codepen.io/anon/pen/iLJAe Any advice on how to do this would be greatly appreciated.

Thanking you in advance

Stu :)

Here what I have in my style.css for the two columns.

style.css

.content {
    border: 1px solid #e8e8e8;
    float: left;
    margin: 5em 0 0;
    padding: 1em;
    height: 100%;
}

.sidebar {
    border: 1px solid #e8e8e8;
    float: left;
    margin: 5em -0.1em 0;
    padding: 1em;
    height: 100%;
}

解决方案

You can use css display: table; property.

First put the two divs in a wrapper (act as a parent div for both)

Like:

<div id="#wrapper">
    <div class="content"></div>
    <div class="sidebar"></div>
</div>

Then in your css, use display: table to the wrapper div and display:table-cell; to the column divs (this will make the both divs behave like <td> in a table) to get them to same height.

Like:

.wrapper{
    height: 100%;
    width: 100%;
    display: table;
    float:left;
}

.content {
    border: 1px solid #e8e8e8;
    margin: 5em 0 0;
    padding: 1em;
    height: 100%;
    background: red; /* for test */
    display: table-cell;
}

.sidebar {
    border: 1px solid #e8e8e8;
    margin: 5em -0.1em 0;
    padding: 1em;
    height: 100%;
    background: blue; /* for test */
    display: table-cell;
}

WORKING SAMPLE

这篇关于如何在两列布局中匹配两列的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！