JavaScript动态插入元素直到父容器填满无溢出的实现方法

先修两个会导致尺寸计算不准的前置问题：

• 仅给wrapper设置width:100%;height:100%不会占满屏幕：浏览器默认html、body标签带8px外边距，且高度默认由内容撑开，必须给这两个标签也设满高、清掉默认边距
• wrapper带1px边框，默认W3C盒模型下边框会额外占据空间，导致wrapper实际尺寸超出屏幕，需要加box-sizing: border-box把边框算入设定的宽高范围内

不用手动计算每个span的占位大小——行内块元素的自动换行、浏览器默认的行内元素空白间距手动算很容易出误差，直接用DOM原生的尺寸属性做判断就行，逻辑非常简单：

• 循环执行插入span的操作
• 每插入一个span，就对比容器的两个尺寸：scrollHeight/scrollWidth是容器内容的实际总宽高，clientHeight/clientWidth是容器的可视区域宽高
• 一旦内容总宽高大于可视区域宽高，说明刚插入的这个span已经超出可视范围了，删掉最后插入的这个span，终止循环就刚好填满容器。

完整代码 #

HTML #

<body onload="init()">
    <div id="wrapper" class="choicebox"></div>
</body>

CSS #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
#wrapper {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    /* 如果不需要显示溢出内容可以加下面这行 */
    /* overflow: hidden; */
}
.box {
    background: #8b95f1;
    padding: 20px;
    font-size: 1.0em;
    display: inline-block;
}

JavaScript #

const wrapper = document.getElementById('wrapper');
function init() {
    // 先清空容器，避免重复初始化时元素叠加
    wrapper.innerHTML = '';
    // 循环插入直到触发溢出终止
    while(true) {
        insertBox("X");
        // 检查是否溢出可视区域
        const overflow = wrapper.scrollHeight > wrapper.clientHeight || wrapper.scrollWidth > wrapper.clientWidth;
        if (overflow) {
            // 移除刚插入的超出范围的元素
            wrapper.removeChild(wrapper.lastElementChild);
            break;
        }
    }
}

function insertBox(currentValue){
    const new_element = document.createElement('span');
    new_element.id = currentValue;
    new_element.textContent = currentValue;
    new_element.classList.add('box');
    wrapper.appendChild(new_element);
}

补充说明 #

• 这个判断方式兼容性极强，所有现代浏览器甚至IE9都支持相关API，不需要引入额外的计算库
• 后续如果修改span的样式、调整容器内边距，这个逻辑不需要做任何改动，会自动适配新的尺寸
• 注意判断溢出后要删的是lastElementChild，不要用lastChild，避免拿到空白文本节点导致删除错误

内容的提问来源于stack exchange，提问作者Freude