我用滚动创建了一个 HTML 三明治页面，但是它不起作用

Question

我创建了一个带有滚动条的 HTML 三明治。

Header

body（滚动table）

页脚

和 header 页脚都不能移动（他们也不会移动），中间的 table 应该滚动它的所有内容，但是，不幸的是滚动条没有出现。我看过很多例子，它应该可以工作，但是我对 HTML.

了解不多

奇怪的是，它在这里起作用：Snippet in LiveWeave

提前致谢。

$(function(){
    
    $("body").css("overflow", "hidden");
  
    $( "#btfirst" ).button({
      icons: {
        primary: "ui-icon-seek-first"
      },
      text: false
    });
    $("#btfirst").css({'height': '1.2em','margin':'1px'});

    $( "#btprev" ).button({
      icons: {
        primary: "ui-icon-seek-prev"
      },
      text: false
    });
    $("#btprev").css({'height': '1.2em','margin':'1px'});


    $( "#btnext" ).button({
      icons: {
        primary: "ui-icon-seek-next"
      },
      text: false
    });
    $("#btnext").css({'height': '1.2em','margin':'1px'});


    $( "#btlast" ).button({
      icons: {
        primary: "ui-icon-seek-end"
      },
      text: false
    });
    $("#btlast").css({'height': '1.2em','margin':'1px'});
});

@font-face
{
 font-family: 'agroverdanab';
 src: url('./fonts/agroverdanab.eot');
 src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');


 font-family: 'agroverdana';
 src: url('./fonts/agroverdana.eot');
 src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}

html,body{ height: 100%; margin: 0; padding: 0; }
#div_main{height:100%;display:flex;flex-direction:column;}

#header{border:solid 1px #79B7E7;border-bottom:0; height:3%;font-family:"agroverdanab";font-size:13px;font-weight:600}
#content{border:solid 1px #79B7E7;flex:1;}

#navdata{}
#navbar{border-bottom:solid 1px #79B7E7;padding:2px}
#navbutton{float:right;}
#msgbar{border:solid 1px #79B7E7;border-top:0; height:3%;}
#footer{border:solid 1px #79B7E7;border-top:0;height:5%; background-color: white;}
  

body{height:100%; overflow-y: scroll; overflow-x: hidden;}

table{
 table-layout:fixed;
 width:100%;
 height:60%
}
table thead tr{background-color:#9BC2E6;font-family:"agroverdana";font-size:12px}
table tbody tr.color{background-color:#DDEBF7;font-family:"agroverdana";font-size:12px}
table tbody tr{background-color:#FFFFFF;font-family:"agroverdana";font-size:12px;border:0}


#navdata {
    height:83%;
    overflow: scroll;
}

#table_body{
    height:83%;
    overflow: scroll;
}

#table_model{
  height: 10px;
    
}

.colgroup1 {
  height: 1px;
  background-color:#9BC2E6;
  font-family:"agroverdana";
  font-size:12px;
  text-align: center;
}
#black_corner{
  width: 12px;
  background-color: gray;
}

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Central de Controle da Engenharia</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js">

</script>
</head>
<body>

<div id="div_main">
 <header id="header" style="text-align:center;">Central de Controle da Engenharia</header>

 <section id="content">
  <header id="navbar">
   
   <input type="text" id="vpad-pesq">
   <select>
    <option>Código</option>
    <option>Nome</option>
   </select>
   
   <div id="navbutton">
    <button id="btfirst"></button>
    <button id="btprev"></button>
    <button id="btnext"></button>
    <button id="btlast"></button>
   </div>   
  </header>
         
        <table id="table_model">
          <colgroup>
            <td class="colgroup1">Código</td>
            <td class="colgroup1">Descrição</td>
            <td id="black_corner"></td>
          </colgroup>
        </table>  
      
  <div id="navdata" role="main">
   <table style="overflow:auto">
    <tbody id="tbody_test">
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>002</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     <tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
     
    </tbody>
   </table>
  </div>
 </section>
 
 <section id="msgbar"></section>
 <footer id="footer">Rodapé</footer>
</div>

</body>

</html>

Answer 1

您可以通过将 overflow 添加到 #div_main 的 css 样式来添加滚动条。试试这个，它说 y-axis 上的页面 overflows 允许滚动。

使整个页面可滚动的解决方案

#div_main {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

仅使 table 可滚动的解决方案

好吧，所以我想通了..有点。 Google Chrome 在动态加载 tbody 的元素时向 tbody 元素添加滚动条时存在严重问题。通过反复试验、广泛的 google 搜索，甚至翻开一些旧的大学书籍，我发现的唯一方法是你必须 'trick it.'

请记住，这不是最简洁的答案，但它可以满足您的需要。

你要做的是用 div 包裹你的 tbody。 div 将允许您滚动。

<div class="scroll-table">
            <table style="overflow:auto">
                <tbody id="tbody_test">
                    <!-- <tr's> dynamically loaded -->
                </tbody>
            </table>
            </div>

然后您需要为新的 div.

设置一个 height 和一些 scrolling 属性

.scroll-table {
    overflow:scroll;
    height:380px;
}

就像我说的，这是 Google Chrome 浏览器中一个相当普遍的问题，但这似乎是常见的解决方案。抱歉，我想不出更优雅的东西，但这应该适用于您正在做的事情！

这里有一个JSFiddle的解决方法。

我用滚动创建了一个 HTML 三明治页面，但是它不起作用

I created an HTML sandwich page with scroll but, it doesn't work

html

javascript

css

scroll