我有三个DIV，其中前两个必须被固定，第三个滚动。我是这样做的：
null
.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>null
但必须修复的前两个div是在彼此之上的。我打算第二个div在第一个div之后，而不是在另一个之上。我知道如果你在css中设置top属性并用它手动调整，但是第一次和第二次俯冲并不总是相同的高度。它们可以有两条线，也可以有十条线。我如何动态区分这一点，以便第二个div出现在第一个之后，而不使用top属性？我试过bottom和margin-bottom属性，但它们不起作用
在前两个fixed div周围添加一个“wrapper”元素，并将其设置为fixed。
<div class="fixed-container">
<div class="topo2">...</div>
<div class="topo6">...</div>
</div>
.fixed-container{
position: fixed;
}
null
(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>
null
$(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>