Question

在下面的示例中，单击Button将向div添加一些名为label的填充。通过单击12次或更多次，包含红色的div按钮的大小开始改变大小。

我已使用box-sizing: border-box;和overflow:hidden。我需要：

将div命名按钮始终保持固定大小
如果标签由于其填充而不适合，则div名称标签应该在容器外不可见

如何修复我的脚本？多谢你们！：）

＆＃13;

let btn = document.getElementById('btn');
let label = document.getElementById('label');
let button = document.getElementById('button');
let padding = 5;
btn.addEventListener('click', event => {
      padding += 5;
      button.style.padding = `${padding}px`;
});

＆＃13;

* {
  box-sizing: border-box;
}

#button {
  width: 200px;
  height: 100px;
  background-color: red;
  overflow: hidden;
}

#label {
  font-size: 50px;
}

＆＃13;

<button id="btn">Click me to add more padding</button>
<div id="button">
  <div id="label">
    Click me!
  </div>
</div>

＆＃13;

Answer 1

将其放入容器

<button id="btn">Click me to add more padding</button>
<div class="button-container">
    <div id="button">
        <div id="label">
            Click me!
        </div>
    </div>
</div>

CSS

* {
  box-sizing: border-box;
}  

.button-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}    

#button {
  width: 100%;
  height: 100%;
  background-color: red;
}  

#label {
  font-size: 50px;
}

Answer 2

那是因为在这种情况下，两次填充已经超过了DIV的原始高度，并且那个大填充不能再包含在原始高度中（box-sizing: border-box;通常会这样做。）

Answer 3

我在按钮周围做了一个带有隐藏溢出的div，它修复了问题;）

HTML：

<button id="btn">Click me to add more padding</button>
<div class="over">
  <div id="button">
    <div id="label">
      Click me!
    </div>
  </div>
</div>

CSS：

.over { overflow: hidden; height: 100px; width: 200px; }

See this fiddle

即使使用box-sizing，添加包含div的填充更改大小：border-box;

3 个答案: