制作相等的高度<div>标签</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

padding-bottom属性指定元素内容和底部边框之间的宽度，由下图中的黄色突出显示区域表示。

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

margin-bottom属性指定元素的底部边框和元素的外边缘之间的宽度，由下图中黄色突出显示的区域表示

单位的定义是：

“Ems”（em）：“em”是一个可扩展的单元，用于Web文档媒体。 em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。 Ems本质上是可扩展的，因此2em等于24pt，.5em等于6pt等。由于可扩展性和移动设备友好性，Ems在Web文档中变得越来越流行。

像素（px）：像素是屏幕媒体中使用的固定大小的单位（即要在计算机屏幕上阅读）。一个像素等于计算机屏幕上的一个点（屏幕分辨率的最小分度）。许多网页设计师在网络文档中使用像素单元，以便在浏览器中呈现网站时生成像素完美的网站表示。像素单元的一个问题是，对于视力不佳的读者而言，它不向上扩展，向下移动以适应移动设备。

积分（点）：积分传统上用于印刷媒体（任何要在纸上打印的东西等）。一点等于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

Answer 4

padding是指容器内的空间。它从外面工作。 margin是指从该对象向外到下一个或屏幕边缘的空间。

例如，如果你有一个100px sq。的盒子，你给它一个padding-bottom：-20px。包装盒内的内容距离包装盒底部20px

如果你给同一个盒子一个底边：20px，你放在盒子底下的任何其他东西总是距离它20px

我希望能回答你的问题

以下是FIDDLE

<div id="wrapper">
    <div id="left-col">LEFT</div>
    <div id="right-col">RIGHT</div>
       <div class="clear">
          <p>I HAVE A MARGIN</p>
       </div>
    <div id="full-row">I HAVE PADDING</div>

</div>

我更喜欢ID容器和CLASS我的容器元素。这样我就可以使用嵌套并定位我需要修改的任何容器，而不会创建太多的类。但这取决于你。

Answer 5

我曾经多次使用过这个JQuery插件，可能对你有用，特别是因为根据列内容，两个列的高度可以相同。

亚当·沃尔夫（Adam Wulf），可以在http://welcome.totheinter.net/columnizer-jquery-plugin/找到。