SCSS

by owen_pengtao

HTML

<div class="left-div">
        Left Content
    </div>
    <div class="right-div">
        Right Content
        <div class="button-div">
        <button id="increaseHeightBtn">Increase Height</button>
        </div>
        
    </div>

SCSS

/* 设置html和body的高度为100% */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 设置左侧div的样式 */
.left-div {
    float: left;
    width: 50%;
    background-color: lightblue;
}

/* 设置右侧div的最小高度为100% */
.right-div {
    display: flex;
    width: 50%;
    min-height: 100%;
    background-color: lightcoral;
    position: relative; /* 为了使按钮始终在底部 */
}

button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

JavaScript

document.getElementById('increaseHeightBtn').addEventListener('click', function() {
    // 获取当前的right-div的高度
    var currentHeight = document.querySelector('.button-div').offsetHeight;
    // 增加400px
    var newHeight = currentHeight + 400 + 'px';
    document.querySelector('.button-div').style.height = newHeight;
});