how to auto resize materialize collapsible to fit window height

Question

I'm using materialize css collapsible component. I'm filling this collapsible content dynamically with thymeleaf template engine. And i want at final when i click on collapsible to show the collapsible body to fill all the window empty space.

I have any clue how to do it with css please help !

<ul class="collapsible popout" data-collapsible="accordion">
            <li th:each="button : ${buttons}">
                <div th:id="${button.name}" class="collapsible-header"  >
                    <img class= "arButton" th:src="@{/images/buttons/{buttonName}.png(buttonName=${button.name})}" th:alt="${button.label}" />
                    <span class = "arButton-label" th:text="${button.label}"></span> 
                </div>
                <div class="collapsible-body">
                    <div class="input-field col s6">
                        <input th:name="${button.name}" th:value="${button.data}" type="text" class="validate" /> 
                        <label th:for="${button.name}"> Entrez la valeur</label>
                    </div>  
                </div>
            </li>
        </ul>