0

Ao redimencionar uma div alterar o tamanho da outra para que assim se mantenham fixas.
Exemplo, ao redimensionar para baixo aumentar o tamanho da div vermelha e diminuir a da verde e ao redimensionar para cima diminuir a vermelha e aumentar a verde

$("#div1").resizable({
   handles: "s", 
});
*{box-sizing:border-box}
.container {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}
textarea {
  text-align:center;
  width:100%;
  height:100%;
  margin:0;
  padding-top:30px;
  background:red;
  color:#fff;
  resize:none;
  overflow:hidden;
}
#div1 {
  width:100%;
  height:50%;
  padding-bottom:15px;
}
#div2 {
  background:green;
  border:1px solid #000;
  width:100%;
  height:50%;
  padding:5px;
}
.ui-resizable-s { 
  width:100%;
  height:6px; 
  background:#e3e3e3;
  border:1px solid #bbb;
  cursor:ns-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="div1"><textarea>USE A BARRA CINZA PARA REDIMENSIONAR</textarea></div>
<div id="div2"></div>
</div>

2 Respostas 2

1

Editado com o contexto do AP

Achei uma pergunta relacionada no SO, esta aqui.

$("#div1").resizable();
$('#div1').resize(function(){
    $('#div2').height($(".container").height()-$("#div1").height()); 
});
*{box-sizing:border-box}
.container {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}
textarea {
  text-align:center;
  width:100%;
  height:100%;
  margin:0;
  padding-top:30px;
  background:red;
  color:#fff;
  resize:none;
  overflow:hidden;
}
#div1 {
  width:100%;
  height:50%;
  padding-bottom:15px;
}
#div2 {
  background:green;
  border:1px solid #000;
  width:100%;
  height:50%;
  padding:5px;
}
.ui-resizable-s { 
  width:100%;
  height:6px; 
  background:#e3e3e3;
  border:1px solid #bbb;
  cursor:ns-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="div1"><textarea>USE A BARRA CINZA PARA REDIMENSIONAR</textarea></div>
<div id="div2"></div>
</div>

4
  • eu tentei com o meu código, que é um resize vertical, e não funcionou...
    – user120323
    21/08/2018 às 16:36
  • @MrStatic teste agora, coloquei com os formatos que você postou 21/08/2018 às 16:41
  • @MrStatic funcionou amigo ? Ou tem algo mais que não está dando certo ? 21/08/2018 às 18:11
  • desculpe acabei de testar e quando eu redimensiono a div de baixo fica maior que a tela ao invés de ficar fixa
    – user120323
    21/08/2018 às 19:32
0

Você pode usar flexbox para manter a div fixas sem que seja necessário fazer isso no script, os exemplos abaixo usam uma div como controle para redimensionar, apenas a primeira div é redimensionada pelo script, a div seguinte acompanha automaticamente, como determinado no flex

Na mesma coluna:

$(".topo").resizable({ //determina a div que será redimensionada
   handleSelector: ".divisor-horizontal", //determina a div que servirá de controle
   resizeWidth: false //desabilita o redimensionamento horizontal
 });
.vertical {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid silver;
  overflow: hidden;
}

.topo {
  flex: 0 0 auto;
  padding: 10px;
  height: 100px;
  width: 100%;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.divisor-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background:#535353;
  cursor: row-resize;
}

.base {
  flex: 1 1 auto;
  padding: 10px;
  min-height: 200px;
  background: #eee;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<div class="vertical">
  <div class="topo">
    topo
  </div>
  <div class="divisor-horizontal">
  </div>
  <div class="base">
    base
  </div>
</div>

Na mesma linha:

 $(".esquerda").resizable({ //determina a div que será redimensionada
   handleSelector: ".divisor", //determina a div que servirá de controle
   resizeHeight: false //desabilita o redimensionamento vertical
 });
.horizontal {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
}

.esquerda {
  flex: 0 0 auto;
  padding: 10px;
  width: 200px;
  min-height: 200px;
  min-width: 100px;
  max-width:80%;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.divisor {
  flex: 0 0 auto;
  width: 18px;  
  background:#535353;
  min-height: 200px;
  cursor: col-resize;  
}

.direita {
  flex: 1 1 auto;
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<div class="horizontal">
  <div class="esquerda">
    Esquerda
  </div>
  <div class="divisor">
  </div>
  <div class="direita">
    Direita
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.