Início / coding / Perguntas / 79590375
Accepted
Hasan Hasan
Asked: 2025-04-24 18:42:03 +0800 CST

altura: calc((50%-10px)/1); não funciona

  • 772

Estou tentando criar este layout, mas há um problema quando quero deixar a margem inferior abaixo do elemento vermelho .up. Quando uso a propriedade calc, a altura não está correta, o que faz com que o elemento rosa suba um pouco em vez de ficar na mesma altura do elemento azul.

.parent {
  width: 500px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  margin: 50px auto;
  overflow: hidden;
}
.child-1 {
  width: calc((50% - 10px)/1);
  margin-right: 10px;
  height: 100%;
  background-color: blueviolet;
  float: left;
}
.child-2 {
  width: 50%;
  height: 100%;
  float: right;

  & .up {
    width: 100%;
    height: calc((50% - 10px)/1);
    margin-bottom: 10px;
    background-color: red;
  }

  & .down {
    width: 100%;
    height: 145px;
    background-color: pink;
  }
}
<div class="parent">
    <div class="child-1"></div>
    <div class="child-2">
      <div class="up"></div>
      <div class="down"></div>
    </div>
  </div>

Eu tentei o mesmo recurso na largura com os mesmos valores e funcionou e consegui o que queria, mas não funcionou na altura, por quê??

css

1 respostas

  1. Best Answer

    Correção: Divida o espaço entre os dois blocos .up e .down igualmente.

    .para cima = 145px

    .para baixo = 145px

    margem inferior = 10px

    Total = 145 + 10 + 145 = 300px (que é a altura dos pais)

     .parent {
  width: 500px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  margin: 50px auto;
  overflow: hidden;
}
.child-1 {
  width: calc(50% - 10px);
  margin-right: 10px;
  height: 100%;
  background-color: blueviolet;
  float: left;
}
.child-2 {
  width: 50%;
  height: 100%;
  float: right;

  & .up {
    width: 100%;
    height: calc(50% - 5px);
    margin-bottom: 10px;
    background-color: red;
  }

  & .down {
    width: 100%;
    height: 145px;
    background-color: pink;
  }
}
    • 1

relate perguntas