html - 我可以让高度 100% 像宽度 100% 一样工作吗？

Question

Fiddle

我有两个 <div> s 在 <section> 中向左浮动.我正在寻找最简单的方法来获得 <div>更短，在本例中为 <div id="one">拉伸(stretch)它的高度以匹配另一个(<div id="two">)。在 fiddle 中，你会看到 <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;
}