如何將DIV縮放到瀏覽器大小的100％？

Question

我有一個帶有母版頁和子頁的webforms ASP.NET應用程序。

在子頁面內，我有一些div，例如：

<html>

<div>
  ....
  <div id="MYDIV">
    <textarea> .... </textarea>
  </div>
</div>

我想添加一個函數，使包含textarea的div達到整個瀏覽器的大小。

我嘗試添加帶有onClick函數的圖像：

<img src="images/full-screen.png" height="16px" onclick="document.getElementById('divEditorReferto').style.height = '100vh'; document.getElementById('divEditorReferto').style.width = '100vh';" />

但這行不通。

第二個問題：如何反轉全屏功能並使div具有舊參數（正常大小）？

謝謝

Answer 1

添加一個單擊事件，以切換類.eg class="example" 。 然后相應地設置樣式。

#MYDIV.example {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
}

Answer 2

簡單的vanilljs切換類

var el = document.querySelector('.toggleFull');
var content = document.querySelector('.textAreaWrapper');
el.onclick = function() {
  content.classList.toggle('full');
}

具有正常和全屏版本的textarea的CSS，以及切換按鈕的位置（.toggleFull）

.textAreaWrapper {
  width:200px;
  border:1px solid red;
  position:relative;
}

.textAreaWrapper.full {
  position:absolute;
  height:100vh;
  width:100%;
  top:0;
  left:0;
  display:flex;
}

.textAreaWrapper .textAreaInner {
  flex-grow:1;
}

.textAreaWrapper.full .textAreaInner {
  height:100vh!important;
  border:1px solid blue;
}

.toggleFull{
  position:absolute;
  bottom:0;
  right:0;
}

這是一個工作的小提琴： https ://codepen.io/anon/pen/pMEXLR ? editors =1111

如何將DIV縮放到瀏覽器大小的100％？

問題描述

2 個解決方案

解決方案1
0 2019-07-26 14:36:38

解決方案2
0 2019-07-26 15:03:17

如何將DIV縮放到瀏覽器大小的100％？

問題描述

2 個解決方案

解決方案1 0 2019-07-26 14:36:38

解決方案2 0 2019-07-26 15:03:17

解決方案1
0 2019-07-26 14:36:38

解決方案2
0 2019-07-26 15:03:17