如何适应具有固定高度的 DIV 的内容答案

【问题标题】：How to fit content of a DIV with fixed height如何适应具有固定高度的 DIV 的内容
【发布时间】：2012-06-20 22:13:23
【问题描述】：

假设我们有一个固定高度的 DIV。如果没有定义width，内容将扩展到 100% 的宽度。如何调整宽度以填充 DIV。当然，CSS 是不可能的，因此，我正在寻找使用 Javascript 的解决方案。

在这个example 中，文本分布在 100% 的宽度上，并在固定高度上留下大量空白空间。我需要通过 javascript 设置 130px 的宽度以使内容适合整个 DIV。但是如何计算宽度呢？

注意：该值 (130px) 是针对示例文本估算的。根据 DIV 内容，javascript 需要计算适合 DIV 内容所需的宽度。

有什么方法可以估计 DIV 内容的 2D 大小吗？

CSS 实际上是为高度做到这一点的；当我们有一个固定的宽度时，它会继续填充 DIV 的高度。宽度也可以这样做吗？

澄清：如何在不知道宽度的情况下垂直填充DIV（我们有固定的高度）？

【问题讨论】：

如果您将宽度设置为 130px，为什么需要计算宽度？你是说身高吗
@DanielHunter 内容是可变的！我们不知道 DIV 中内容的长度。我们需要动态设置宽度。
那么内容会是图像吗？如果是文本，它也会填满你告诉它的内容。
如果内容适合 100% 宽度的一行，你会怎么做？如果它适合 101% 宽度的一行呢？制作两条宽度为 50.5% 的线？基本上，您的问题是您没有固定任何两个维度，因此存在具有必要区域的“无限”可能的框。
用什么 ALI 文本或图像填充它

标签： javascript css layout html

【解决方案1】：

如果我正确理解您的要求，您可以使用 Javascript 来完成。

诀窍是使用帮助器<div>，让浏览器在其中将内容流动到特定宽度并查看它出现的高度。如果助手<div>的高度大于外部<div>的高度，调整宽度进行补偿。

同时，外部<div> 具有overflow: hidden，因此所有这些流动的实验不会对您的页面布局产生不和谐的变化。

See it in action.

【讨论】：

嗯，这是一个棘手的方法，但它可以解决问题！实际上，我们需要定义一个最小宽度。
@Ali：小提琴已经使用了 210px 的最小宽度。如果您从 #helper 中的较少文本开始，就会变得很明显。

【解决方案2】：

这是另一种方法。虽然效率较低，但它可能比我的其他答案更准确。

见例子here:

基本上将宽度向下循环，直到达到所需的高度

<div id="AA">
    <div id='A'>
        I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i need to be
    </div>
</div>

CSS：

#AA {
    height: 300px;
    border: 1px solid black;
    width: 100%;
}

#A {
   display: inline;
}

脚本：

    height = $('#AA').height();
minWidth = 300;

currentWidth = $('#A').width();
currentHeight = $('#A').height();
stop = false;

if (currentWidth >= minWidth) {

    while (stop === false) {
        if (currentWidth >= minWidth) {
            newWidth = currentWidth - 1;
            $('#AA').width(newWidth);
            currentHeight = $('#A').height();
            currentWidth = $('#A').width();
            if (currentHeight < height) {
                stop = false;
            }
            else {
                stop = true;
            }
        }
        else {
            stop = true;
        }
    }
}

【讨论】：