如何自动调整大小实现可折叠以适应窗口高度

Question

我使用了materialize css可折叠组件。我用百万美元模板引擎动态填充这个可折叠的内容。我希望在最后，当我点击可折叠以显示可折叠的主体以填充所有窗口空白区域时。

我有任何线索如何用css做请帮助！

<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>