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

【问题标题】：How to horizontal scroll in full screen mode?如何在全屏模式下水平滚动？
【发布时间】：2018-06-27 09:12:09
【问题描述】：

更新： 修好了！我最终将包含表格的 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;

【问题讨论】：

尝试添加相对位置

标签： javascript html css asp.net-mvc fullscreen

【解决方案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

【讨论】：