Кнопки в приложении calculator выходят за пределы своих родителей div

ProgramBox

Кнопки в приложении calculator выходят за пределы своих родителей div

Post author:admin
Запись опубликована:18 марта, 2023
Post category:Вопросы по программированию

#html #css #overflow

#HTML #css #переполнение

Вопрос:

Я создаю этот калькулятор, который заставил меня сойти с ума сегодня днем. Я впервые использую 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>

Ответ №1:

Я нашел это.

Я удалил height from .calculator , дал height: 120px; to .output и добавил padding: 30px 0; to .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>

Ответ №2:

высота .calculator единицы vh измерения для % этого равна

измените это

 .calculator{ 
   height: 80vh;
}

Для

 .calculator{ 
   height: 80%;
}

например height: 50px; .output , вместо height:25%

Также добавлено поле-снизу к .keyboardparent

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

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

1. та же проблема, что и у меня, она выглядит странно на маленьких или больших экранах, независимо от того, как я ее настраиваю. слишком много полей и фиксированных высот. Кнопки, выходные данные и клавиатура ее родительский элемент, а также сам калькулятор нуждаются в адаптивной высоте. Размеры шрифтов также будут изменяться при определенных размерах экрана

Вопрос:

Ответ №1:

Ответ №2:

Комментарии:

Вам также может понравиться

Нажмите на ссылку плейлиста, чтобы запустить и остановить музыку в audioplayer

Очистка: не удается извлечь содержимое с веб-страницы

Помогите мне увидеть, какая функция вызывается с помощью firebug