1. 首页
  2. 问题列表
  3. 计算器应用程序上的按钮超出了它们的div双亲
提问者：小点点

计算器应用程序上的按钮超出了它们的div双亲


我正在建造这个计算器，它让我今天下午发疯了。我是第一次使用网格，到现在我只使用了Flex-Box.。。

问题是这些按钮在div（计算器）之外。我主要是为移动而建的。在Chrome上的移动模拟器上看起来很完美，但是当我上传它并在我的手机上查看它时，按钮已经超出了div的范围。。。我已经建立了几十个测试网站，从来没有出现过这个问题，所有的东西都停留在应该停留的地方。

我做错了什么？我已经在这里呆了两个小时想让它工作，我真的觉得自己很蠢。

null

* {
  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>

null


共2个答案

匿名用户

我找到了。

我从.calculator中删除了高度，将高度:120px；指定给.output，并将填充:30px 0；添加给.keyboardparent。

感谢之前的解决方案，没想到VH中设置的.calculator的高度会造成一定的损害。

null

* {
  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>

匿名用户

.calculator的高度VH到%的单位，即

更改此

.calculator{ 
   height: 80vh;
}

至

.calculator{ 
   height: 80%;
}

像这样height:50px；到.output而不是height:25%

还向.keyboardparent添加了bottom边距

.keyboardparent {  margin-bottom: 5.5%;} // you already given margin-top: 5.5%; to output

null

* {
  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: 80%;
  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;
  top:10px;
}

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: 50px;
  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;
  margin-bottom: 5.5%;
}

.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>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS