1
<html>    
<body>
<h1>Some text</h1>
    <div id="tab1" class="tab">
        <button class="tablinks" onclick="openTab(event, 'Chess')" id="defaultOpen">Chess</button>
        <button class="tablinks" onclick="openTab(event, 'Sudoku')">Sudoku</button>
    </div>

    <div id="Chess" class="tabcontent">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <span class="h3" id="time1">0:05:00</span>
                <div id="board"></div>
                <span class="h3" id="time2">0:05:00</span>
                <div id="engineStatus">...</div>
                <!-- Trigger/Open The Modal -->
                <button id="myBtn">Setting</button>
            </div>

            <div class="col-sm-6 col-md-6">
                <h3>Moves:</h3>
                <pre id="pgn"></pre>
            </div>
        </div>
    </div>

    <div id="Sudoku" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>
</body>
<html/>

the board is chessboard.js. I'm trying to have the entire content of "chess" tab auto fit the remaining min(height,width) of the viewport by auto resizing the board's length to equal the remaining min(height/width), I tried doing this with and without jquery, by subtracting the remaining elements heights from the client height, with no success, furthermore the different methods of getting the client height return different values.

Jonas
  • 11
  • 1
  • You might be trying to resize before the DOM is loaded. This question might be relevant: [Wait till loaded](https://stackoverflow.com/questions/1033398/how-to-execute-a-function-when-page-has-fully-loaded) – Ususipse Sep 22 '19 at 16:44

0 Answers0