margin经典两栏等高布局垂直方向 margin 无法改变元素的内部尺寸，但却能改变外部尺寸，这里我们设置了 marg

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="demo">

        <div class="container">
            <div id="colLeft" class="column-left">
                <h4>正方观点</h4>
                <p>观点1</p>
            </div>
            <div id="colRight" class="column-right">
                <h4>反方观点</h4>
            </div>
        </div>
        <div class="container">
            <p class="half">
                <input type="button" id="leftMore" value="更多正方观点">
            </p>
            <p class="half">
                <input type="button" id="rightMore" value="更多反方观点">
            </p>
        </div>
    </div>
</body>
<style>
    .container {
        margin: auto;
        max-width: 600px;
        overflow: hidden;
    }

    .column-left,
    .column-right {
        width: 50%;
        float: left;
        margin-bottom: -99999px;
        padding-bottom: 99999px;
        color: #fff;
    }

    .column-left {
        background-color: #34538b;
    }

    .column-right {
        background-color: #cd0000;
    }

    .half {
        width: 50%;
        float: left;
    }
</style>
<script>
    var $ = function (id) {
        return document.getElementById(id);
    };
    // 分栏元素
    var colLeft = $('colLeft'), colRight = $('colRight');
    // 按钮元素
    var leftMore = $('leftMore'), rightMore = $('rightMore');

    // 序号
    var indexLeft = 1, indexRight = 0;

    if (colLeft && colRight && leftMore && rightMore) {
        leftMore.onclick = function () {
            indexLeft = indexLeft + 1;
            colLeft.insertAdjacentHTML('beforeend', '<p>观点' + indexLeft + '</p>');
        };
        rightMore.onclick = function () {
            indexRight = indexRight + 1;
            colRight.insertAdjacentHTML('beforeend', '<p>观点' + indexRight + '</p>');
        };
    }
</script>

</html>

垂直方向 margin 无法改变元素的内部尺寸，但却能改变外部尺寸，这里我们设置了 margin-bottom:-9999px 意味着元素的外部尺寸在垂直方向上小了 9999px。默认情况下，垂直方向块级元素上下距离是 0，一旦 margin-bottom:-9999px 就意味着后面所有元素和上面元素的空间距离变成了-9999px，也就是后面元素都往上移动了 9999px。此时，通过神来一笔 padding-bottom:9999px 增加元素高度，这正负一抵消，对布局层并无影响，但却带来了我们需要的东西—视觉层多了 9999px 高度的可使用的背景色。但是，9999px 太大了，所以需要配合父级 overflow:hidden 把多出来的色块背景隐藏掉，于是实现了视觉上的等高布局效果。