为计算器元素添加黑色背景的CSS技术求助

问题出在你给.calculator设置了min-height: 100vh，导致它撑满整个视口高度，连带外层的.background也跟着铺满页面。调整布局和样式就能实现你要的效果，步骤如下：

1. 简化HTML结构：移除多余的.background容器，直接给计算器元素加背景
2. 调整body布局：用flex让计算器在页面垂直水平居中
3. 给计算器添加黑色背景：同时去掉撑满视口的高度设置

修改后的代码：

CSS #

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: sans-serif; /* 修正原代码里的font-style错误，应为font-family */
    font-weight: normal;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00AAFF, #00FF6C);
    /* 用flex布局实现计算器居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.calculator {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    /* 添加黑色背景 */
    background-color: black;
    /* 给计算器加内边距，避免按钮贴边 */
    padding: 1rem;
    /* 可选：添加圆角优化视觉效果 */
    border-radius: 1rem;
}

HTML #

<body>
    <div class="calculator">
        <div class="output">
            <div data-previous-operand class="previous-operand"></div>
            <div data-current-operand class="current-operand"></div>
        </div>
        <button data-allClear>AC</button>
        <button data-switch-signs>+/-</button>
        <button data-percentage>%</button>
        <button data-operation>÷</button>
        <button data-number>7</button>
        <button data-number>8</button>
        <button data-number>9</button>
        <button data-operation>x</button>
        <button data-number>4</button>
        <button data-number>5</button>
        <button data-number>6</button>
        <button data-operation>-</button>
        <button data-number>1</button>
        <button data-number>2</button>
        <button data-number>3</button>
        <button data-operation>+</button>
        <button data-number class="span-two">0</button>
        <button data-number>.</button>
        <button data-equals>=</button>
    </div>
</body>

关键调整说明 #

• 把body改成flex布局，通过align-items: center和justify-content: center让计算器完美居中，同时min-height: 100vh保证body撑满视口，渐变背景正常显示。
• 移除.calculator的min-height: 100vh，让它的高度由内部按钮和输出区域决定，不会撑满页面。
• 直接给.calculator添加黑色背景，不需要额外容器，结构更简洁。
• 加了padding: 1rem让计算器内部元素和黑色背景边缘有间距，视觉效果更自然（可根据需求调整或移除）。

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