使用基础GS的父母的全高div

Question

您好我正在尝试使用Zurb基础的网格设置父div的全高度的div。我当前的CSS的问题，当我将屏幕调整为移动格式时，黄色div与橙色div重叠。有没有人知道另一种方法呢？

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .wrapper{
            position: absolute;
            height: 150px;
        }
        .four {
            background: yellow;
            padding: 10px;
        }
        .eight {
            background: orange;
            padding: 10px;
            height: 100%;
            position: relative;
        }

    </style>

    <div class="row wrapper">
        <div class="eight push-four columns">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum<br>
        </div>

        <div class="four pull-eight columns">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>


        </div>
    </div>