Question

在我目前的项目中，我有以下结构

<ol>
    <li>...</li>
    <li>
        <section>
            <h1>some title</h1>
            <p>some text</p>
        </section>
    </li>
    <li>...</li>
</ol>

ol有一个变量，但设置的高度由li（通过height:100%;）填充。现在我希望段落中的文字填充剩余的高度（通过line-height和/或font-size）。

我已经研究了这个但是并没有真正找到解决方案，只有FitText.js，但它“只适用于巨大的显示文字”，正如他们所说。

所以我想出了一个JavaScript解决方案，从两个视角计算剩余高度（默认line-height: 1em和line-height: 0em）并计算所需的line-height，因此剩余高度为0（通过基本数学，插入函数y = a*x + b，其中y等于剩余高度。

var outerHeight = $("section").innerHeight(),
    h1Height = $("section").children("h1").first().outerHeight(),
    pHeight = $("section").children("p").first().outerHeight();

var defaultHeight, a, b, x;

defaultHeight = outerHeight - (h1Height + pHeight);
$("section").children("p").first().css("line-height", "0em");
b = outerHeight - (h1Height + $("section").children("p").first().outerHeight());
a = defaultHeight - b;
x = -b / a;
$("section").children("p").first().css("line-height", x+"em");

jsfiddle here

最后我的问题：是否有可能以更好的方式实现这一点（纯CSS会很棒但是我对此表示怀疑）？如果没有，我可能会发生哪些事件需要重新计算（例如调整浏览器大小）？

此外，我希望文本最大程度地填充该部分 - 目前最后一行的line-height可能会在字符和部分底部之间创建一个小的可见区域。

Answer 1

这对我来说很有趣，所以我想我可能会对此感到沮丧。这是FIDDLE可能会给你一些新想法。

我把所有东西都换成了div（不知道为什么，也许只是我）
我假设标题的大小是固定的，文本将分布在大div的大小减去标题的大小上。
然后简单划分总高度和文本的初始大小。

显然它不会在极端情况下起作用（三个字，或一本书长文本。

我将警报留给了show，显然你可以删除它们或将它们注释掉。

JS

var outerheight = $(".oldiv").innerHeight();
var titleheight = $(".oldiv div:first-child").outerHeight();
var textheight = $(".oldiv div:last-child").outerHeight();
var heighttodistribute = outerheight - titleheight;

alert( outerheight + '-' + titleheight + '-' + textheight + '-' + heighttodistribute);

var newlineheight = heighttodistribute / textheight;

alert(newlineheight);


$('.oldiv div:last-child').css('line-height', newlineheight);

使段落自动填充父级的剩余高度

1 个答案: