Question

目前我解决以下问题的方法是使用JavaScript计算和调整额外空间。是否有更好的（CSS / HTML）＆＃39; ish方式？

我计算用过的空间并减去可用空间。然后将控件的高度更改为该值。效果很好，但有没有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;或者如果我使用div作为表格？

Answer 1

根据您需要支持的浏览器，您可以使用名为flex box的CSS布局功能。此布局可以根据可用的垂直和水平空间增大或缩小，并可以根据您指定的规则重新布局其包含的项目。您可以在此处查看有关弹性框的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

不是我知道的。之所以出现这种情况，是因为主体百分比宽度基于浏览器窗口，但百分比高度基于文档大小，可能小于或大于浏览器窗口。

唯一的解决方案就是你使用js。

在页面中间进行一些控制以消耗剩余的顶点空间的最佳方法是什么？

2 个答案: