Question

Fiddle

我在<div>内留下了两个<section>。我正在寻找最简单的方法来获取更短的<div>，在这种情况下<div id="one">来拉伸其高度以匹配另一个（<div id="two">）。在小提琴中，你会看到<div id="one">有灰色背景，我想继续到<section>的底部。任何变通办法或任何完成任务的工作都很棒。但我不想用javascript来做这件事。感谢。

HTML：

<section>
    <div id="one"><p>Lorem</p></div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
    <div class="clear"></div>
</section>

CSS：

section {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#one, #two {
    float: left;
    width: 50%;
}
#one {
    background: rgb(230,230,230);
}
.clear {
    clear: both;
}

Answer 1

加载jquery并添加以下javascript

$(document).ready( function() {
    var x = $("#one").css('height');
    var y = $("#two").css('height');

    if(x > y) {
        $("#two").css('height', x);
    } else {
        $("#one").css('height', y);
    }
});

但是如果你对JavaScript过敏......并且会接受你可以尝试的CSS3

section {
    display: flex;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#one, #two {
    display: flex;
    width: 50%;
    display: table-cell;
}

Answer 2

这是一个纯HTML和CSS解决方案。它使用一个带有“内部”类的div来包装你想要匹配的div。还添加了一些CSS，使其表现得像你想要的那样。

jsFiddle solution - pure HTML and CSS

HTML code：

<section>
<div class="inner">
    <div id="one">
        <p>Lorem</p>
    </div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
            consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
            porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
            adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
</div>
<div class="clear"></div>

Answer 3

你可以破解#one div中p的填充，但这会在你的div中抛出你的文本。我不确定与其他文本对齐有多相关，但它可能会帮助你。

#one p {
padding: 9em;

}

我可以让高度100％像宽度100％一样工作吗？

3 个答案: