html - 计算器应用程序上的按钮超出了他们的 div 父母

Question

我正在建造这个计算器，这让我今天下午发疯了。我第一次使用 Grid，直到现在我只使用 flex-box...

问题是按钮超出了 div （计算器）。我主要为移动设备构建它。在 Chrome 上的移动模拟器上看起来很完美，但是当我上传它并在手机上查看它时，按钮就在 div 之外......我已经建立了几十个测试网站，从来没有遇到过这个问题，一切都保留了应该一直呆在哪里。

我究竟做错了什么？我已经在这里待了 2 个小时，试图让它发挥作用，我开始觉得自己很愚蠢。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}

.calculator {
  border: 1px solid rgb(0,0,0,.3);
  width: 80vw;
  height: 80vh;
  margin: auto;
  position: relative;
  top: 50vh;
  transform: translateY(-50%);
  border-radius: 10px;
  background: rgb(225,225,225);
  box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}

.name {
  width: 100%;
  height: 3%;
  position: absolute;
}

h5 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .8em;
  color: rgb(0,0,0,.5);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.output {
  width: 90%;
  height: 25%;
  margin: auto;
  margin-top: 5.5%;
  background: white;
  box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
  border-radius: 3px;
}

.previous {
  width: 100%;
  height: 40%;
  border-bottom: .5px solid rgb(0,0,0,.5);
}

.current {
  width: 100%;
  height: 60%;
}

.keyboardparent {
  width: 90%;
  height: 75%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border:3px solid red;
}

.keyboard {
  width: 100%;
  height: 90%;
  margin: auto;
  border:3px solid black;
}

.top {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  grid-gap: .5em;
  -webkit-gap: .5em;
}

.rest {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: .5em;
  -webkit-grid-gap: .5em;
  margin-top: .5em;
}

button {
  cursor: pointer;
  font-size: 1.5em;
  padding: 10px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
  outline: none;
  background: rgba(250,250,250,.8);
}

.color {
  background: rgba(0,200,197,.3);
}

button:active {
  transform: scale(.95);
}

  <div class="calculator">

    <div class="name">
      <h5>Matthew Industries INC</h5>
    </div>

    <div class="output">
      <div class="previous"></div>
      <div class="current"></div>
    </div>

    <div class="keyboardparent">
      <div class="keyboard">

        <div class="top">
          <button class="colorc">C</button>
          <button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
          <button class="color">%</button>
        </div>

        <div class="rest">
          <button>7</button>
          <button>8</button>
          <button>9</button>
          <button class="color">/</button>
          <button>4</button>
          <button>5</button>
          <button>6</button>
          <button class="color">x</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button class="color">-</button>
          <button class="color">.</button>
          <button>0</button>
          <button class="color">=</button>
          <button class="color">+</button>
        </div>
      </div>
    </div>

  </div>
  

标签： htmlcssoverflow

Answer 1

我找到了。

我删除了heightfrom .calculator，给height: 120px;并.output添加padding: 30px 0;到.keyboardparent。

感谢您之前的解决方案，我不认为.calculator设置的高度vh会造成一些损害。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}

.calculator {
  border: 1px solid rgb(0,0,0,.3);
  width: 80vw;
  margin: auto;
  position: relative;
  top: 50vh;
  transform: translateY(-50%);
  border-radius: 10px;
  background: rgb(225,215,215);
  box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}

.name {
  width: 100%;
  height: 3%;
  position: absolute;
}

h5 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .8em;
  color: rgb(0,0,0,.5);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.output {
  width: 90%;
  height: 120px;
  margin: auto;
  margin-top: 5.5%;
  background: rgba(180,200,180);
  box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
  border-radius: 3px;
}

.previous {
  width: 100%;
  height: 40%;
  border-bottom: .5px solid rgb(0,0,0,.5);
}

.current {
  width: 100%;
  height: 60%;
}

.keyboardparent {
  width: 90%;
  height: 75%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
}

.keyboard {
  width: 100%;
  height: 90%;
  margin: auto;
}

.top {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr;
  grid-gap: .5em;
  -webkit-gap: .5em;
}

.rest {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: .5em;
  -webkit-grid-gap: .5em;
  margin-top: .5em;
}

button {
  cursor: pointer;
  font-size: 1.5em;
  padding: 10px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
  outline: none;
  background: rgba(250,250,250,.8);
  text-align: center;
  vertical-align: ;
}

.color {
  background: rgba(0,200,207,.3);
}

button:active {
  transform: scale(.95);
}

.clearall {
  background: rgba(255,0,50,.7);
}

.cancel {
 background: rgba(255,0,0,.5);
}

 <div class="calculator">

    <div class="name">
      <h5>Matthew Industries INC</h5>
    </div>

    <div class="output">
      <div class="previous"></div>
      <div class="current"></div>
    </div>

    <div class="keyboardparent">
      <div class="keyboard">

        <div class="top">
          <button class="clearall">C</button>
          <button class="cancel"><img src="delete.svg" class="delete" width="23px" alt=""></button>
          <button class="color">%</button>
        </div>

        <div class="rest">
          <button>7</button>
          <button>8</button>
          <button>9</button>
          <button class="color">/</button>
          <button>4</button>
          <button>5</button>
          <button>6</button>
          <button class="color">x</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button class="color">-</button>
          <button class="color">.</button>
          <button>0</button>
          <button class="color equal">=</button>
          <button class="color">+</button>
        </div>
      </div>
    </div>

  </div>