Question

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

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

注意：估算了示例文本的此值（130px）。根据DIV内容，javascript需要计算适合DIV内容所需的宽度。

有没有办法估算DIV内容的2D大小？

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

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

Answer 1

如果我正确理解您的要求，您可以使用Javascript执行此操作。

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

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

<强> See it in action

Answer 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;
        }
    }
}

如何适应固定高度的DIV内容

2 个答案: