고정된 선 및 Viewport

SpreadJS를 사용하면 시트에서 행 또는 열 또는 모두의 고정 여부를 정의할 수 있습니다. 후행 행 및/또는 열을 고정할지 여부를 지정할 수도 있습니다. 고정된 열과 행은 고정되어 스크롤할 수 없으므로 관련 데이터 헤더나 데이터를 항상 표시하는 데 이상적입니다.

설명
app.js
index.html
data.js
styles.css

시트의 고정된 행과 열은 고정된 선 구분선을 사용하여 시트의 viewport 영역에서 행과 열을 스크롤하지 못하게 합니다. 또한 고정된 선은 viewport를 여러 행 및 열 viewport로 나눕니다.

한 시트에 최대 4개의 서로 다른 고정된 선을 설정할 수 있습니다. 이렇게 하면 현재 viewport가 3개의 행 viewport와 3개의 열 viewport로 나뉩니다. 다음 코드는 한 시트에 고정된 선 4개를 만듭니다:

    //set row frozenline and column frozenline.
    sheet.frozenRowCount(4);
    sheet.frozenColumnCount(3);
    sheet.frozenTrailingRowCount(3);
    sheet.frozenTrailingColumnCount(3);

고정된 행과 열의 경우, spreadJS는 기본적으로 0행에서 표시하는 대신, 맨 위 행에서 frozenRows 표시를 컨트롤하는 매개 변수를 제공하며, 기본적으로 0열에서 표시하는 대신, 왼쪽 열에서 frozenColumns 표시를 컨트롤하는 매개 변수를 제공합니다.

    sheet.frozenRowCount(40, 35);
    sheet.frozenColumnCount(30, 28);

고정된 후행 행 및 열의 경우, spreadJS는 frozenTrailingRows를 항상 뷰포트의 맨 아래에, frozenTrailingColumns를 항상 뷰포트의 오른쪽에 배치할지 컨트롤하는 매개 변수를 제공합니다. stickToEdge 매개 변수가 false이면 데이터 행에 부분 행이 불완전하게 표시되지 않는 경우 후행 행이 다음 뷰포트를 스크롤합니다. 그러지 않으면 기본적으로 후행 행은 뷰포트 영역에서 행이 스크롤되지 않도록 방지하고 항상 뷰포트 맨 아래에 위치합니다. 후행 열과 동일합니다. 아래 코드에 표시된 대로 사용하십시오.

    sheet.frozenTrailingRowCount(3, false/* stickToEdge */);
    sheet.frozenTrailingColumnCount(3, false/* stickToEdge */);

다음 코드와 같이 frozenLine의 색을 사용자 정의할 수 있습니다.

    sheet.options.frozenlineColor = 'red';

SpreadJS는 width, height, topRow 등과 같은 각 viewport에 대한 정보를 가져올 수 있는 메서드를 제공합니다.

한 시트에 고정된 행 선과 고정된 열 선을 설정했다고 가정하십시오. 원래 viewport는 세 개의 행 viewport로 나뉘었으며 viewport 인덱스는 0, 1 및 2입니다. 이 경우 다음 코드를 사용하여 두 번째 viewport에 대한 정보를 가져올 수 있습니다.

    sheet.getViewportWidth(1);
    sheet.getViewportHeight(1);

    sheet.getViewportTopRow(1);
    sheet.getViewportBottomRow(1);
    sheet.getViewportLeftColumn(1);
    sheet.getViewportRightColumn(1);
시트의 고정된 행과 열은 고정된 선 구분선을 사용하여 시트의 viewport 영역에서 행과 열을 스크롤하지 못하게 합니다. 또한 고정된 선은 viewport를 여러 행 및 열 viewport로 나눕니다. 한 시트에 최대 4개의 서로 다른 고정된 선을 설정할 수 있습니다. 이렇게 하면 현재 viewport가 3개의 행 viewport와 3개의 열 viewport로 나뉩니다. 다음 코드는 한 시트에 고정된 선 4개를 만듭니다: 고정된 행과 열의 경우, spreadJS는 기본적으로 0행에서 표시하는 대신, 맨 위 행에서 frozenRows 표시를 컨트롤하는 매개 변수를 제공하며, 기본적으로 0열에서 표시하는 대신, 왼쪽 열에서 frozenColumns 표시를 컨트롤하는 매개 변수를 제공합니다. 고정된 후행 행 및 열의 경우, spreadJS는 frozenTrailingRows를 항상 뷰포트의 맨 아래에, frozenTrailingColumns를 항상 뷰포트의 오른쪽에 배치할지 컨트롤하는 매개 변수를 제공합니다. stickToEdge 매개 변수가 false이면 데이터 행에 부분 행이 불완전하게 표시되지 않는 경우 후행 행이 다음 뷰포트를 스크롤합니다. 그러지 않으면 기본적으로 후행 행은 뷰포트 영역에서 행이 스크롤되지 않도록 방지하고 항상 뷰포트 맨 아래에 위치합니다. 후행 열과 동일합니다. 아래 코드에 표시된 대로 사용하십시오. 다음 코드와 같이 frozenLine의 색을 사용자 정의할 수 있습니다. SpreadJS는 width, height, topRow 등과 같은 각 viewport에 대한 정보를 가져올 수 있는 메서드를 제공합니다. 한 시트에 고정된 행 선과 고정된 열 선을 설정했다고 가정하십시오. 원래 viewport는 세 개의 행 viewport로 나뉘었으며 viewport 인덱스는 0, 1 및 2입니다. 이 경우 다음 코드를 사용하여 두 번째 viewport에 대한 정보를 가져올 수 있습니다.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); spread.suspendPaint(); spread.fromJSON(data[0]); var sheet = spread.getActiveSheet(); sheet.setRowCount(100); sheet.frozenRowCount(4); sheet.frozenColumnCount(3); sheet.frozenTrailingRowCount(1, false); sheet.frozenTrailingColumnCount(1, false); sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; sheet.options.frozenlineColor = 'rgb(247, 167, 17)'; spread.resumePaint(); _getElementById('btnSetFrozenLine').addEventListener('click', function() { if (_getElementById('rowCount').value) { var rowCount = parseInt(_getElementById('rowCount').value), topRow = parseInt(_getElementById('topRow').value); sheet.frozenRowCount(rowCount, topRow); } if (_getElementById('trailingRowCount').value) { var trailingRowCount = parseInt(_getElementById('trailingRowCount').value); var rowStickToEdge = _getElementById('rowStickToEdge').checked; sheet.frozenTrailingRowCount(trailingRowCount, rowStickToEdge); } if (_getElementById('columnCount').value) { var columnCount = parseInt(_getElementById('columnCount').value), leftColumn = parseInt(_getElementById('leftColumn').value); sheet.frozenColumnCount(columnCount, leftColumn); } if (_getElementById('trailingColumnCount').value) { var trailingColumnCount = parseInt(_getElementById('trailingColumnCount').value); var columnStickToEdge = _getElementById('columnStickToEdge').checked; sheet.frozenTrailingColumnCount(trailingColumnCount, columnStickToEdge); } }); }; function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <label class="option-label" for="rowCount">FrozenRowCount:</label> <input type="text" id="rowCount" value="4" /> <label class="option-label" for="topRow">FrozenTopRow:</label> <input type="text" id="topRow" value="0" /> </div> <div class="option-row"> <label class="option-label" for="columnCount">FrozenColumnCount:</label> <input type="text" id="columnCount" value="3" /> <label class="option-label" for="leftColumn">FrozenLeftColumn:</label> <input type="text" id="leftColumn" value="0" /> </div> <div class="option-row"> <label class="option-label" for="trailingRowCount">FrozenTrailingRowCount:</label> <input type="text" id="trailingRowCount" value="1" /> <div> <input type="checkbox" id="rowStickToEdge" /> <label for="rowStickToEdge">Stick to Edge</label> </div> </div> <div class="option-row"> <label class="option-label" for="trailingColumnCount">FrozenTrailingColumnCount:</label> <input type="text" id="trailingColumnCount" value="0"/> <div> <input type="checkbox" id="columnStickToEdge" checked /> <label for="columnStickToEdge">Stick to Edge</label> </div> </div> <div class="option-row"> <input type="button" value="Set" id="btnSetFrozenLine" /> </div> </div> </div> </body> </html>
var data = [{ "version": "14.0.5", "sheetCount": 1, "tabStripRatio": 0.6, "customList": [], "activeSheetIndex": 0, "sheets": { "Sheet1": { "name": "Sheet1", "isSelected": true, "rowCount": 33, "columnCount": 11, "activeRow": 5, "activeCol": 3, "theme": { "name": "Office", "themeColor": { "name": "Office", "background1": { "a": 255, "r": 255, "g": 255, "b": 255 }, "background2": { "a": 255, "r": 231, "g": 230, "b": 230 }, "text1": { "a": 255, "r": 0, "g": 0, "b": 0 }, "text2": { "a": 255, "r": 68, "g": 84, "b": 106 }, "accent1": { "a": 255, "r": 68, "g": 114, "b": 196 }, "accent2": { "a": 255, "r": 237, "g": 125, "b": 49 }, "accent3": { "a": 255, "r": 165, "g": 165, "b": 165 }, "accent4": { "a": 255, "r": 255, "g": 192, "b": 0 }, "accent5": { "a": 255, "r": 91, "g": 155, "b": 213 }, "accent6": { "a": 255, "r": 112, "g": 173, "b": 71 }, "hyperlink": { "a": 255, "r": 5, "g": 99, "b": 193 }, "followedHyperlink": { "a": 255, "r": 149, "g": 79, "b": 114 } }, "headingFont": "Calibri Light", "bodyFont": "Calibri" }, "data": { "dataTable": { "2": { "2": { "value": "Weather Card", "style": "__builtInStyle17" }, "3": { "style": "__builtInStyle17" }, "4": { "style": "__builtInStyle17" }, "5": { "style": "__builtInStyle17" }, "6": { "style": "__builtInStyle17" }, "7": { "style": "__builtInStyle17" }, "8": { "style": "__builtInStyle17" }, "9": { "style": "__builtInStyle17" }, "10": { "style": "__builtInStyle17" } }, "3": { "2": { "value": "Date", "style": "__builtInStyle5" }, "3": { "value": "Max Temperature (F)", "style": "__builtInStyle10" }, "4": { "value": "Min Temperature (F)", "style": "__builtInStyle2" }, "5": { "value": "Precipitation", "style": "__builtInStyle2" }, "6": { "value": "Cloud Cover", "style": "__builtInStyle2" }, "7": { "value": "Visiblity (miles)", "style": "__builtInStyle2" }, "8": { "value": "Wind (mph)", "style": "__builtInStyle2" }, "9": { "value": "Humidity", "style": "__builtInStyle2" }, "10": { "value": "Forecast", "style": "__builtInStyle2" } }, "4": { "2": { "value": "/OADate(44228)/", "style": "__builtInStyle6" }, "3": { "value": 19, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.8, "style": "__builtInStyle14" }, "6": { "value": 1, "style": "__builtInStyle16" }, "7": { "value": 10, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.76, "style": "__builtInStyle14" }, "10": { "value": "Rainy", "style": "__builtInStyle3" } }, "5": { "2": { "value": "/OADate(44229)/", "style": "__builtInStyle6" }, "3": { "value": 23, "style": "__builtInStyle12" }, "4": { "value": 15, "style": "__builtInStyle12" }, "5": { "value": 0.2, "style": "__builtInStyle14" }, "6": { "value": 0.98, "style": "__builtInStyle16" }, "7": { "value": 13, "style": "__builtInStyle8" }, "8": { "value": 19, "style": "__builtInStyle8" }, "9": { "value": 0.62, "style": "__builtInStyle14" }, "10": { "value": "Mostly Cloudy", "style": "__builtInStyle3" } }, "6": { "2": { "value": "/OADate(44230)/", "style": "__builtInStyle6" }, "3": { "value": 24, "style": "__builtInStyle12" }, "4": { "value": 14, "style": "__builtInStyle12" }, "5": { "value": 0.9, "style": "__builtInStyle14" }, "6": { "value": 0.99, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 14, "style": "__builtInStyle8" }, "9": { "value": 0.77, "style": "__builtInStyle14" }, "10": { "value": "Thunderstorm", "style": "__builtInStyle3" } }, "7": { "2": { "value": "/OADate(44231)/", "style": "__builtInStyle6" }, "3": { "value": 24, "style": "__builtInStyle12" }, "4": { "value": 14, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.74, "style": "__builtInStyle16" }, "7": { "value": 14, "style": "__builtInStyle8" }, "8": { "value": 26, "style": "__builtInStyle8" }, "9": { "value": 0.56, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "8": { "2": { "value": "/OADate(44232)/", "style": "__builtInStyle6" }, "3": { "value": 27, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.82, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.57, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "9": { "2": { "value": "/OADate(44233)/", "style": "__builtInStyle6" }, "3": { "value": 27, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.2, "style": "__builtInStyle14" }, "6": { "value": 0.88, "style": "__builtInStyle16" }, "7": { "value": 9, "style": "__builtInStyle8" }, "8": { "value": 16, "style": "__builtInStyle8" }, "9": { "value": 0.71, "style": "__builtInStyle14" }, "10": { "value": "Cloudy", "style": "__builtInStyle3" } }, "10": { "2": { "value": "/OADate(44234)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 18, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.82, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.57, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "11": { "2": { "value": "/OADate(44235)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0.01, "style": "__builtInStyle16" }, "7": { "value": 18, "style": "__builtInStyle8" }, "8": { "value": 19, "style": "__builtInStyle8" }, "9": { "value": 0.53, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "12": { "2": { "value": "/OADate(44236)/", "style": "__builtInStyle6" }, "3": { "value": 29, "style": "__builtInStyle12" }, "4": { "value": 21, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0.01, "style": "__builtInStyle16" }, "7": { "value": 19, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.59, "style": "__builtInStyle14" }, "10": { "value": "Sunny", "style": "__builtInStyle3" } }, "13": { "2": { "value": "/OADate(44237)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0.01, "style": "__builtInStyle16" }, "7": { "value": 18, "style": "__builtInStyle8" }, "8": { "value": 19, "style": "__builtInStyle8" }, "9": { "value": 0.53, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "14": { "2": { "value": "/OADate(44238)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.63, "style": "__builtInStyle16" }, "7": { "value": 13, "style": "__builtInStyle8" }, "8": { "value": 15, "style": "__builtInStyle8" }, "9": { "value": 0.6, "style": "__builtInStyle14" }, "10": { "value": "Cloudy", "style": "__builtInStyle3" } }, "15": { "2": { "value": "/OADate(44239)/", "style": "__builtInStyle6" }, "3": { "value": 24, "style": "__builtInStyle12" }, "4": { "value": 18, "style": "__builtInStyle12" }, "5": { "value": 0.4, "style": "__builtInStyle14" }, "6": { "value": 0.79, "style": "__builtInStyle16" }, "7": { "value": 15, "style": "__builtInStyle8" }, "8": { "value": 17, "style": "__builtInStyle8" }, "9": { "value": 0.66, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "16": { "2": { "value": "/OADate(44240)/", "style": "__builtInStyle6" }, "3": { "value": 25, "style": "__builtInStyle12" }, "4": { "value": 16, "style": "__builtInStyle12" }, "5": { "value": 0.7, "style": "__builtInStyle14" }, "6": { "value": 0.99, "style": "__builtInStyle16" }, "7": { "value": 13, "style": "__builtInStyle8" }, "8": { "value": 14, "style": "__builtInStyle8" }, "9": { "value": 0.72, "style": "__builtInStyle14" }, "10": { "value": "Rainy", "style": "__builtInStyle3" } }, "17": { "2": { "value": "/OADate(44241)/", "style": "__builtInStyle6" }, "3": { "value": 27, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.93, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.57, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "18": { "2": { "value": "/OADate(44242)/", "style": "__builtInStyle6" }, "3": { "value": 27, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.2, "style": "__builtInStyle14" }, "6": { "value": 0.69, "style": "__builtInStyle16" }, "7": { "value": 14, "style": "__builtInStyle8" }, "8": { "value": 16, "style": "__builtInStyle8" }, "9": { "value": 0.71, "style": "__builtInStyle14" }, "10": { "value": "Cloudy", "style": "__builtInStyle3" } }, "19": { "2": { "value": "/OADate(44243)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 18, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.04, "style": "__builtInStyle16" }, "7": { "value": 20, "style": "__builtInStyle8" }, "8": { "value": 18, "style": "__builtInStyle8" }, "9": { "value": 0.6, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "20": { "2": { "value": "/OADate(44244)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0.05, "style": "__builtInStyle16" }, "7": { "value": 20, "style": "__builtInStyle8" }, "8": { "value": 19, "style": "__builtInStyle8" }, "9": { "value": 0.53, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "21": { "2": { "value": "/OADate(44245)/", "style": "__builtInStyle6" }, "3": { "value": 29, "style": "__builtInStyle12" }, "4": { "value": 21, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0, "style": "__builtInStyle16" }, "7": { "value": 21, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.59, "style": "__builtInStyle14" }, "10": { "value": "Sunny", "style": "__builtInStyle3" } }, "22": { "2": { "value": "/OADate(44246)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.56, "style": "__builtInStyle16" }, "7": { "value": 10, "style": "__builtInStyle8" }, "8": { "value": 15, "style": "__builtInStyle8" }, "9": { "value": 0.6, "style": "__builtInStyle14" }, "10": { "value": "Cloudy", "style": "__builtInStyle3" } }, "23": { "2": { "value": "/OADate(44247)/", "style": "__builtInStyle6" }, "3": { "value": 24, "style": "__builtInStyle12" }, "4": { "value": 18, "style": "__builtInStyle12" }, "5": { "value": 0.4, "style": "__builtInStyle14" }, "6": { "value": 0.78, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 17, "style": "__builtInStyle8" }, "9": { "value": 0.66, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "24": { "2": { "value": "/OADate(44248)/", "style": "__builtInStyle6" }, "3": { "value": 25, "style": "__builtInStyle12" }, "4": { "value": 16, "style": "__builtInStyle12" }, "5": { "value": 0.7, "style": "__builtInStyle14" }, "6": { "value": 0.99, "style": "__builtInStyle16" }, "7": { "value": 13, "style": "__builtInStyle8" }, "8": { "value": 14, "style": "__builtInStyle8" }, "9": { "value": 0.72, "style": "__builtInStyle14" }, "10": { "value": "Rainy", "style": "__builtInStyle3" } }, "25": { "2": { "value": "/OADate(44249)/", "style": "__builtInStyle6" }, "3": { "value": 27, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.93, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.57, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "26": { "2": { "value": "/OADate(44250)/", "style": "__builtInStyle6" }, "3": { "value": 27, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.2, "style": "__builtInStyle14" }, "6": { "value": 0.69, "style": "__builtInStyle16" }, "7": { "value": 14, "style": "__builtInStyle8" }, "8": { "value": 16, "style": "__builtInStyle8" }, "9": { "value": 0.71, "style": "__builtInStyle14" }, "10": { "value": "Cloudy", "style": "__builtInStyle3" } }, "27": { "2": { "value": "/OADate(44251)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 18, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.04, "style": "__builtInStyle16" }, "7": { "value": 20, "style": "__builtInStyle8" }, "8": { "value": 18, "style": "__builtInStyle8" }, "9": { "value": 0.6, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "28": { "2": { "value": "/OADate(44252)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 17, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0.05, "style": "__builtInStyle16" }, "7": { "value": 20, "style": "__builtInStyle8" }, "8": { "value": 19, "style": "__builtInStyle8" }, "9": { "value": 0.53, "style": "__builtInStyle14" }, "10": { "value": "Most Sunny", "style": "__builtInStyle3" } }, "29": { "2": { "value": "/OADate(44253)/", "style": "__builtInStyle6" }, "3": { "value": 29, "style": "__builtInStyle12" }, "4": { "value": 21, "style": "__builtInStyle12" }, "5": { "value": 0, "style": "__builtInStyle14" }, "6": { "value": 0, "style": "__builtInStyle16" }, "7": { "value": 21, "style": "__builtInStyle8" }, "8": { "value": 11, "style": "__builtInStyle8" }, "9": { "value": 0.59, "style": "__builtInStyle14" }, "10": { "value": "Sunny", "style": "__builtInStyle3" } }, "30": { "2": { "value": "/OADate(44254)/", "style": "__builtInStyle6" }, "3": { "value": 28, "style": "__builtInStyle12" }, "4": { "value": 19, "style": "__builtInStyle12" }, "5": { "value": 0.1, "style": "__builtInStyle14" }, "6": { "value": 0.56, "style": "__builtInStyle16" }, "7": { "value": 10, "style": "__builtInStyle8" }, "8": { "value": 15, "style": "__builtInStyle8" }, "9": { "value": 0.6, "style": "__builtInStyle14" }, "10": { "value": "Cloudy", "style": "__builtInStyle3" } }, "31": { "2": { "value": "/OADate(44255)/", "style": "__builtInStyle6" }, "3": { "value": 24, "style": "__builtInStyle12" }, "4": { "value": 18, "style": "__builtInStyle12" }, "5": { "value": 0.4, "style": "__builtInStyle14" }, "6": { "value": 0.78, "style": "__builtInStyle16" }, "7": { "value": 12, "style": "__builtInStyle8" }, "8": { "value": 17, "style": "__builtInStyle8" }, "9": { "value": 0.66, "style": "__builtInStyle14" }, "10": { "value": "Partly Cloudy", "style": "__builtInStyle3" } }, "32": { "2": { "value": "Average", "style": "__builtInStyle5" }, "3": { "value": 26.4642857142857, "style": "__builtInStyle13", "formula": "AVERAGE(D5:D32)" }, "4": { "value": 17.7857142857143, "style": "__builtInStyle13", "formula": "AVERAGE(E5:E32)" }, "5": { "value": 0.217857142857143, "style": "__builtInStyle15", "formula": "AVERAGE(F5:F32)" }, "6": { "value": 0.562857142857143, "style": "__builtInStyle15", "formula": "AVERAGE(G5:G32)" }, "7": { "value": 14.6071428571429, "style": "__builtInStyle9", "formula": "AVERAGE(H5:H32)" }, "8": { "value": 15.3928571428571, "style": "__builtInStyle9", "formula": "AVERAGE(I5:I32)" }, "9": { "value": 0.6225, "style": "__builtInStyle15", "formula": "AVERAGE(J5:J32)" }, "10": { "style": "__builtInStyle4" } } }, "columnDataArray": [null, null, { "style": "__builtInStyle7" }, { "style": "__builtInStyle11" }], "defaultDataNode": { "style": { "backColor": null, "foreColor": "Text 1 0", "vAlign": 2, "font": "normal normal 16px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "diagonalDown": null, "diagonalUp": null } } }, "rowHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "colHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rows": [null, null, { "size": 35 }, { "size": 21 }, { "size": 21 }, { "size": 26 }, { "size": 23 }, { "size": 21 }, { "size": 22 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 17 }, { "size": 21 }, { "size": 22 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }, { "size": 21 }], "columns": [null, null, { "size": 132 }, { "size": 133 }, { "size": 126 }, { "size": 122 }, { "size": 111 }, { "size": 126 }, { "size": 141 }, { "size": 116 }, { "size": 184 }], "leftCellIndex": 0, "topCellIndex": 0, "spans": [{ "row": 2, "rowCount": 1, "col": 2, "colCount": 9 }], "selections": { "0": { "row": 5, "rowCount": 1, "col": 3, "colCount": 1 }, "length": 1 }, "defaults": { "colHeaderRowHeight": 20, "colWidth": 20, "rowHeaderColWidth": 40, "rowHeight": 20.8, "_isExcelDefaultColumnWidth": true }, "rowOutlines": { "items": [] }, "columnOutlines": { "items": [] }, "cellStates": {}, "outlineColumnOptions": {}, "autoMergeRangeInfos": [], "index": 0 } }, "namedStyles": [{ "backColor": "Accent 1 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent1" }, { "backColor": "Accent 2 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent2" }, { "backColor": "Accent 3 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent3" }, { "backColor": "Accent 4 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent4" }, { "backColor": "Accent 5 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent5" }, { "backColor": "Accent 6 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent6" }, { "backColor": "Accent 1 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent1" }, { "backColor": "Accent 2 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent2" }, { "backColor": "Accent 3 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent3" }, { "backColor": "Accent 4 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent4" }, { "backColor": "Accent 5 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent5" }, { "backColor": "Accent 6 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent6" }, { "backColor": "Accent 1 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent1" }, { "backColor": "Accent 2 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent2" }, { "backColor": "Accent 3 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent3" }, { "backColor": "Accent 4 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent4" }, { "backColor": "Accent 5 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent5" }, { "backColor": "Accent 6 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent6" }, { "backColor": "Accent 1 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent1" }, { "backColor": "Accent 2 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent2" }, { "backColor": "Accent 3 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent3" }, { "backColor": "Accent 4 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent4" }, { "backColor": "Accent 5 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent5" }, { "backColor": "Accent 6 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent6" }, { "backColor": "#ffc7ce", "foreColor": "#9c0006", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Bad" }, { "backColor": "#f2f2f2", "foreColor": "#fa7d00", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#7f7f7f", "style": 1 }, "borderTop": { "color": "#7f7f7f", "style": 1 }, "borderRight": { "color": "#7f7f7f", "style": 1 }, "borderBottom": { "color": "#7f7f7f", "style": 1 }, "name": "Calculation", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#a5a5a5", "foreColor": "Background 1 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#3f3f3f", "style": 6 }, "borderTop": { "color": "#3f3f3f", "style": 6 }, "borderRight": { "color": "#3f3f3f", "style": 6 }, "borderBottom": { "color": "#3f3f3f", "style": 6 }, "name": "Check Cell", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)", "name": "Comma" }, { "backColor": null, "formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)", "name": "Comma [0]" }, { "backColor": null, "formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)", "name": "Currency" }, { "backColor": null, "formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)", "name": "Currency [0]" }, { "backColor": null, "foreColor": "#7f7f7f", "font": "italic normal 14.7px Calibri", "themeFont": "Body", "name": "Explanatory Text" }, { "backColor": "#c6efce", "foreColor": "#006100", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Good" }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 20px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 0", "style": 5 }, "name": "Heading 1", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 17.3px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 50", "style": 5 }, "name": "Heading 2", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 40", "style": 2 }, "name": "Heading 3", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "name": "Heading 4" }, { "backColor": "#ffcc99", "foreColor": "#3f3f76", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#7f7f7f", "style": 1 }, "borderTop": { "color": "#7f7f7f", "style": 1 }, "borderRight": { "color": "#7f7f7f", "style": 1 }, "borderBottom": { "color": "#7f7f7f", "style": 1 }, "name": "Input", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#fa7d00", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "#ff8001", "style": 6 }, "name": "Linked Cell", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#ffeb9c", "foreColor": "#9c6500", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Neutral" }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 16px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "Normal", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#ffffcc", "borderLeft": { "color": "#b2b2b2", "style": 1 }, "borderTop": { "color": "#b2b2b2", "style": 1 }, "borderRight": { "color": "#b2b2b2", "style": 1 }, "borderBottom": { "color": "#b2b2b2", "style": 1 }, "name": "Note", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#f2f2f2", "foreColor": "#3f3f3f", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#3f3f3f", "style": 1 }, "borderTop": { "color": "#3f3f3f", "style": 1 }, "borderRight": { "color": "#3f3f3f", "style": 1 }, "borderBottom": { "color": "#3f3f3f", "style": 1 }, "name": "Output", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "formatter": "0%", "name": "Percent" }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 24px Calibri Light", "themeFont": "Headings", "name": "Title" }, { "backColor": null, "foreColor": "Text 1 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": { "color": "Accent 1 0", "style": 1 }, "borderRight": null, "borderBottom": { "color": "Accent 1 0", "style": 6 }, "name": "Total", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#ff0000", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Warning Text" }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 16px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle1", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal bold 12px Calibri Light", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle2", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -5", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle3", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle4", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal bold 12px Calibri", "formatter": "yyyy\\-mm\\-dd;@", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle5", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -5", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "formatter": "yyyy\\-mm\\-dd;@", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle6", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 16px Calibri", "themeFont": "Body", "formatter": "yyyy\\-mm\\-dd;@", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle7", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "formatter": "0", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle8", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal bold 12px Calibri", "formatter": "0", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle9", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal bold 12px Calibri Light", "formatter": "0", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle10", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 16px Calibri", "themeFont": "Body", "formatter": "0", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle11", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "formatter": "0\\ \\F", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle12", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal bold 12px Calibri", "formatter": "0\\ \\F", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle13", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "formatter": "0\\ %", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle14", "diagonalDown": null, "diagonalUp": null }, { "backColor": "Background 1 -15", "foreColor": "#000000", "hAlign": 1, "vAlign": 1, "font": "normal bold 12px Calibri", "formatter": "0\\ %", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle15", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 1, "vAlign": 1, "font": "normal normal 12px Calibri", "themeFont": "Body", "formatter": "0\\ %", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle16", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#82bc00", "foreColor": "#ffffff", "hAlign": 1, "vAlign": 1, "font": "normal bold 21.3px Calibri", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": true, "name": "__builtInStyle17", "diagonalDown": null, "diagonalUp": null }] }];
input[type="text"] { width: 200px; box-sizing: border-box; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .option-label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; width:200px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }