javascript - 如何自动调整实体化可折叠以适应窗口高度

Question

我正在使用物化 css 可折叠组件。我正在使用 thymeleaf 模板引擎动态填充这个可折叠的内容。最后，当我单击可折叠以显示可折叠主体以填充所有窗口空白空间时，我想要。

我有任何线索如何使用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>