Question

更新：修好了！我最终将包含表格的Div的宽度和高度增加了100％，这使“全屏”完美地贴在屏幕上，使我也可以看到以前无法看到的两个滚动条。感谢那些试图帮助我的人！

我有一个div，里面有table，并且div进入了全屏模式，table很大，所以您看不到全部内容全屏显示，所以我需要滚动功能才能工作。

垂直滚动在全屏模式下有效，但水平滚动屏不起作用，有人知道如何使其在全屏模式下与水平滚动屏一起工作吗？

这是一个ASP.NET MVC应用程序。

我用来使div全屏显示的方法：

    function fullscreenActivate() {
    var i = document.getElementById("overviewDiv");

    if (i.requestFullscreen) {
        i.requestFullscreen();
    } else if (i.webkitRequestFullscreen) {
        i.webkitRequestFullscreen();
    } else if (i.mozRequestFullScreen) {
        i.mozRequestFullScreen();
    } else if (i.msRequestFullscreen) {
        i.msRequestFullscreen();
    }
}

div（表是动态加载的，table中没什么特别的）：

<div id="overviewDiv">
    Loading...
</div>

我在CSS上拥有的div：

    overflow-x: scroll;
    overflow-y: scroll;

Answer 1

我不确定我是否理解这个问题，但是： 1）您需要有2个div的一个父级，其屏幕尺寸为1个，而表的尺寸应大于当前div的尺寸 2）您不需要js将父div设置为全屏，您可以使用width：100vw和height：100vh 3）您可以将父div设置为溢出：滚动

在此示例中，我将父级的宽度/高度设置为px，以更好地理解结果，您应该将其替换为vh / vw。

.parent-div{
  background-color:red;
  /*
  Use this:
  width:100vw;
  height:100vh
  */
  width:500px;
  height:400px;
  overflow:scroll;
}
.child-div{
  background:green;
  height:300px;
  width:3000px;

}

希望这对您有用：https://codepen.io/frivolta/pen/MXPmoe

如何在全屏模式下水平滚动？

1 个答案: