Question

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

头

正文（滚动表）

页脚

页眉也不能移动（并且他们不会），并且中心的桌子应滚动其所有内容，但是，不幸的是，滚动条没有出现。我已经看过很多例子，但它应该有用，我对HTML不太了解。

奇怪的是，它可以在这里工作：Snippet in LiveWeave

提前致谢。

＆＃13;

$(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'});
});

＆＃13;

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

＆＃13;

Answer 1

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

使整页可滚动的解决方案

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

使表格可滚动的解决方案

好吧，所以我想出来了..有点儿。在动态加载tbody元素时，向Chrome tbody元素添加滚动条时，谷歌浏览器存在问题。我通过反复试验，广泛的谷歌搜索，甚至破解一些旧的大学书籍找到的唯一方法就是你必须“欺骗它”。

请记住，这不是最干净的答案，但它可以满足您的需求。

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

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

然后，您需要为新height设置scrolling和部分div属性。

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

正如我所说，这是谷歌Chrome浏览器中一个相当广泛的问题，但这是一种似乎常见的解决方案。对不起，我不能想出一些更优雅的东西，但这应该适用于你正在做的事情！

以下是解决方案的 JSFiddle 。

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

1 个答案: