问题：

放置两个固定的div和下一个要滚动的内容

云瑞

2023-03-14

我有三个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属性，但它们不起作用

共有2个答案

卫嘉泽

2023-03-14

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;
}

html lang-html prettyprint-override"><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>

傅嘉悦

2023-03-14

在前两个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>

类似资料：

动画滚动顶部在一个位置：固定的div

在positon=fixed的div上，我似乎无法滚动页面。当我使用下面的代码时：在overlay（类名）div中，它不起作用，因为overlay div有一个固定的位置。
两个div，一个固定宽度，另一个固定

问题内容：我有两个div容器。尽管一个需要为特定宽度，但我需要对其进行调整，以便另一个div占用其余空间。有什么办法可以做到吗？问题答案：请参阅： http ： //jsfiddle.net/SpSjL/ （调整浏览器的宽度） HTML： CSS：您也可以使用这样做，这通常是一种更好的方法：如何将输入元素与其标签放在同一行？
两个div，一个固定宽度，另一个固定宽度

问题内容：我有两个div容器。虽然其中一个需要为特定宽度，但我需要对其进行调整，以便另一个div占用其余空间。有什么办法可以做到吗？问题答案： HTML： CSS：您也可以使用这样做，这通常是一种更好的方法：如何将输入元素与其标签放在同一行？
具有固定位置的div，如果内容溢出，则需要滚动

问题内容：我实际上有两个问题，但是让我先解决主要问题，因为我认为另一个更容易解决。我在菜单左侧的滚动条的左侧有一个固定位置的div。右侧是可以正确滚动的标准div。问题是，当浏览器的视口太小而看不到整个菜单时，..没有办法让它滚动到我能找到的位置（至少没有使用CSS）。我试过在CSS中使用不同的溢出，但是没有什么可以使div滚动。包含菜单的div设置为min- height：100％和posi
如何同步两个div的滚动位置？

问题内容：我想将2个div的大小设置为特定宽度（即500px）。一个高于另一个水平对齐。顶部框应隐藏其滚动条，底部框应显示滚动条，并且当用户滚动时，我希望顶部框的偏移量更改为底部框的值。因此，当底部DIV水平滚动时，似乎顶部DIV也同时滚动。我很高兴在Jquery中做到这一点，如果它使过程更容易。问题答案： $(‘#bottom’).on(‘scroll’, function () {
jQuery位置DIV固定在滚动条的顶部

问题内容：我的页面相当长，并且在布局菜单中有一个弹出菜单。我希望菜单的弹出部分显示在页面顶部，即使用户将菜单栏滚动到视线之外。这是菜单的HTML 这是脚本。我将导航栏“ .frozen_top”锁定到滚动浏览器窗口的顶部（到目前为止，它可以正常工作），但是此外，一旦锁定，我想更改“ 问题答案：与其那样做，不如在窗口滚动后不让弹出按钮通过某个高度： jQuery CSS

放置两个固定的div和下一个要滚动的内容

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档