在頁面中間進行一些控制以消耗剩余的頂點空間的最佳方法是什么？

Question

目前，我解決以下問題的方法是使用JavaScript計算和調整多余的空間。 有沒有更好的（CSS / HTML）方式？

我計算已用空間並減去可用空間。 然后將控件的高度更改為該值。 效果很好，但是有CSS解決方案嗎？

此處對此進行了更好的說明： http : //jsfiddle.net/sdh38gxe/4/

<body>
    <div id="mainDiv">
        <div id="divForHeight">
            <h1>Some title</h1>
            <input type="text" placeholder="Some contols" />
            <textarea>I want to expand this to have the maximum verticle space without introducing scrollbars</textarea>
            <input type="text" placeholder="Some more contols" />
            <button type="button">Save</button>
        </div>
    </div>
</body>

我意識到我想要的答案並不像這樣簡單，但是我正在尋找的是一些CSS height: consumeMaximumAvailableSpace;例如height: consumeMaximumAvailableSpace; 還是如果我使用div作為表？

Answer 1

根據需要支持的瀏覽器，可以使用稱為flex box的CSS布局功能。 此布局可以根據可用的垂直和水平空間而增大或縮小，並且可以根據您指定的規則重新布局其包含的項目。 您可以在此處查看有關彈性盒的更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

從來沒聽說過。 出現這種情況的原因是，正文百分比寬度基於瀏覽器窗口，而百分比高度基於文檔大小，該文檔大小可能小於或大於瀏覽器窗口。

唯一的解決方案就是您使用js所采取的解決方案。

在頁面中間進行一些控制以消耗剩余的頂點空間的最佳方法是什么？

問題描述

2 個解決方案

解決方案1
0 2015-05-03 21:19:15

解決方案2
0

在頁面中間進行一些控制以消耗剩余的頂點空間的最佳方法是什么？

問題描述

2 個解決方案

解決方案1 0 2015-05-03 21:19:15

解決方案2 0

解決方案1
0 2015-05-03 21:19:15

解決方案2
0