制作等高<div>标签

Question

我想让两个div在高度上相等，是的，在各种论坛和博客中，我找到了这样做的方法。尽管我让它正常工作，但这些CSS规则(在查询部分中提到)仍然困扰着我，似乎无法理解。这是标记：-

<div class="container">
    <div class="left-col">
        Hello there , This is Left content<br/>
        Hello there , This is Left content<br/>
    <div>

    <div class="right-col">
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
    </div>
</div>

这是CSS :-

.container{
height:100%;
overflow:hidden;
}

.left-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}

.right-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}

有人能解释一下

padding-bottom:500em (or something)

&

margin-bottom:-500em(Use of negative sign).

Answer 1

填充-底部属性指定元素的内容和底部边框之间的宽度，用下图中的黄色高亮显示区域表示。

​

默认值为0，可以用百分比、像素、pt或em来定义。

“边距-底部”属性指定元素的底部边框与元素的外部边缘之间的宽度，以下图中的黄色高亮显示区域表示。

​

The 单位的定义是

“Ems”(em):“em”是一个可伸缩的单元，用于web文档媒体。em等于当前字体大小，例如，如果文档的字体大小为12 if，则1em等于12 if。Ems在本质上是可扩展的，因此2em等于24 6pt，.5em等于6pt等。由于其可扩展性和移动设备友好的特性，Ems在web文档中正变得越来越流行。 像素(px):像素是用于屏幕媒体(即在计算机屏幕上读取)的固定大小的单元。一个像素等于计算机屏幕上的一个点(屏幕分辨率的最小除法)。许多网页设计师使用网页文档中的像素单元来生成他们的站点在浏览器中呈现时的像素完美表示。像素单元的一个问题是，对于视力受损的读者来说，它不会向上缩放，也不会向下适应移动设备。 点(pt):点传统上用于印刷媒体(任何要打印在纸上的东西，等等)。1点等于1/72英寸。点很像像素，因为它们是固定大小的单位，不能缩放大小. 百分比(%):百分比单位与“em”单位很相似，但有几个基本差异。首先，当前字体大小等于100% (即12pt = 100%)。在使用百分比单位时，您的文本对于移动设备和可访问性来说仍然是完全可伸缩的。

Answer 2

解决这一问题的一个好方法是使用jQuery自动设置两个部门的高度。

例如，让我们假设你有：

<div class="double_column_left">
    //code
</div>
<div class="double_column_right">
    //code
</div>

之后，检索一个div '.double_column_right‘的高度，并将其应用于另一个div (’.double_column_left‘)的最小高度。使用以下JQuery代码：

var divHeight = $('.double_column_right').height();

$('.double_column_right').css('min-height', divHeight+'px');

试试这个，如果有用的话让我知道。

Answer 3

我不能评论，这就是为什么我把这个作为回答。最近我也遇到了同样的问题，并发现了以下问题：http://codepen.io/micahgodbolt/pen/FgqLc