Início / coding / Perguntas / 79465201
Accepted
Morag Hughson
Asked: 2025-02-25 09:26:52 +0800 CST

Faça com que div preencha o espaço quando as bordas do espaço forem relativamente movidas

  • 772

Se eu quiser que um div preencha o espaço entre dois outros, posso fazer o seguinte, e o overflow:autono contêiner do div central faz com que ele preencha o espaço. Não importa quão grande ou pequena (dentro do razoável!) seja a página, os três divs permanecem unidos - isso é ótimo.

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="overflow:auto;">
  <div style="background-color:blue;height:10px;margin-top:50px;width:100%"></div>
</div>

Entretanto, se eu tiver divs com posições relativas, como faço para obter o mesmo resultado? Como faço para que a div azul central preencha o espaço?

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;">
  <div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>

Descobri que se eu adicionar position:relative;left:-50px;ao contêiner para o div azul, posso movê-lo para a esquerda, então esse é o primeiro passo. Agora preciso aumentar sua largura por aqueles 50px que movi e por outros 50px para o gap do outro lado.

Pensei que poderia adicionar width: calc(100% +100px);ao contêiner o div azul para lidar com isso, mas isso não funciona, veja abaixo.

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;position:relative;left:-50px;width: calc(100% +100px);">
  <div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>

O que estou esquecendo? Preciso de uma solução somente CSS.

html

1 respostas

  1. Best Answer

    Em vez de left:-50pxe right:-50px, você pode usar margin-left:-50pxe margin-right:-50px, para que a posição do DOM corresponda aos visuais.

    <div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;margin-left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;margin-right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;">
  <div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>

    • 1

relate perguntas