元素没有完全全屏答案

【问题标题】：Element not going completely fullscreen元素没有完全全屏
【发布时间】：2023-03-23 09:51:01
【问题描述】：

问题：下面的图只是部分全屏。如何在全屏时拉伸此元素以填充屏幕的整个可视区域？

我正在使用的全屏功能：

function toggleFullscreen(elem) { //function to make element (cell) fullscreen on most browsers
      elem = elem || document.documentElement;
      if (!document.fullscreenElement && !document.mozFullScreenElement &&
        !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } 
    }

回调到全屏：

var $saved_cell = $('.cell.code_cell.rendered.selected > div.output_wrapper > div.output > div > div.output_subarea.output_html.rendered_html');

$saved_cell.each(
        function() { toggleFullscreen(this) } ).css({
            'background-color' : 'rgb(244,244,244)',
            'position': 'absolute',
            'z-index': '9999',
            'min-width': '100%',
            'height': '100vh',
            'margin': '0',
            'padding': '0',
            'overflow': 'auto'
        }); //expand selected cell

另外，这里是所选元素周围 DOM 的屏幕截图：

【问题讨论】：

标签： javascript jquery css fullscreen jupyter-notebook

【解决方案1】：

您需要更改或删除在图形<svg> 项目本身上设置的宽度和高度。简单地使 div 变大不会自动调整图形的大小。

另一种可能更简单的方法（在我看来）可能是从<div class="svg-container" ...> 复制子节点并将它们放入另一个容器中复制的<svg> 元素的宽度和高度，因此它们不是固定的，并切换全屏视图。这样您就不会弄乱可能想要维护的“正常”视图。

您可以使用 JQuery 的 .find() 和 .clone() 到达上面提到的 div （而不是尝试走那个讨厌的结构）并在其中复制您想以 100% 显示的空间。然后根据需要操作<svg> 的宽度和高度。

【讨论】：