Place two fixed divs and the next content to scroll - html

Question

I have three divs, where the first two have to be fixed and the third scroll. I'm doing it this way:
.topo2 {
position: fixed;
width: 95%;
z-index: 10;
top: auto;
bottom: auto;
}
.topo6 {
position: fixed;
width: 95%;
z-index: 10;
bottom: auto;
}
.acerto{
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
But the first two divs that have to be fixed are on top of each other.
I intend the second div to be after the first div and not on top of the other. I know that if you set the top property in the css and manually adjust it with it, but the first and second dives are not always the same height.
They can have two lines with having ten lines. How do I dynamically distinguish this so that the second div appears after the first without using the top property?
I've tried the bottom and margin-bottom properties but they don't work

Answer 1

Add a 'wrapper' element around the first two fixed divs, and set that one to fixed.
<div class="fixed-container">
<div class="topo2">...</div>
<div class="topo6">...</div>
</div>
.fixed-container{
position: fixed;
}
(function ($) {
$(function () {
$( window ).resize(function() {
setPadding();
});
setPadding();
function setPadding() {
let pad = ($('.fixed-container').height() + 10) + 'px';
$('.acerto').css('padding-top', pad);
}
});
})(jQuery);
.fixed-container{
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-container">
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>

Answer 2

$(window).on('load resize', function(){
var fixedCon = $('.fixed-container').outerHeight();
$('.acerto').css('margin-top',fixedCon);
});
.fixed-container{
position: fixed;
width: 95%;
z-index: 10;
top: 0;
}
.acerto{
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-container">
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
First you need to store top div height in variable after then you can add top using stored value on window load and resize function so it will automatic set top position according to first div height. Please check demo.