使用HTML CSS保护两个集团(动态行)的高度

Question

我想节省两个动态表的一定高度。我知道该解决方案是使用Javascipt（document.getElementById（'bloc2'）。style.height = document.getElementById（'bloc1'）。clientheight）。

我们可以使用HTML和CSS的使用来找到其他解决方案？

Answer 1

首先，请努力使用您的语言技能（如果您不擅长英语， verifie ），并使用样式工具stackoverflow。

所有信息都在这里，检查一下。作为答案，我首先建议不要真正需要<table>！

<div id="container">
    <div id="block_1" class="foo">
        <!-- Your HTML/text content -->
    </div>
    <div id="block_2" class="foo">
        <!-- Your HTML/text content -->
    </div>
</div>

和CSS（值是示例，使用您的示例）：

#container {
    width: 100%;
    /* The height will be minimum 350px, depending on the content */
    min-height: 350px;
    /* I often use flexbox properties, it does really well the job */
    display: flex;
    flex-flow: row nowrap;
    justify-content: center; // Default value
}
.foo {
    width: 50%;
    /* this value will make your 2 blocks the same height according to their container */
    height: inherit;
}

检查flexbox属性（有很多），它可以减轻您的工作。