Question

我是CSS和HTML布局的新手。我遇到了一些问题。如何达到div块高度的动态计算？在我的示例中，存在两个嵌套的div块。包装和内容块，其中包含可以具有不同大小的图例。我需要，如果图例的大小更多的包装块，滚动条出现，否则没有。我如何到达？通过CSS或JS等我试图写这样的东西，但是这段代码绑定到恒定的块大小。如果内容的大小大于嵌套块的大小，则滚动条无助于查看隐藏的内容。我还必须说我使用Amcharts框架生成图表 https://imgur.com/FaJ9NAo在这里您可以看到代码的结果（对不起，我没有信誉以正确的方式附加图片）

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}
#chartlegenddiv { /*Legend content block*/
    height: 280px; /* need auto computing here */
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    height: 200px;
    float: right;
    overflow-y: auto;
}

Answer 1

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    max-height: 70px;
    float: right;
    overflow-y: auto;
}

<div id="chartlegendwrapper"><div>1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
</div></div>

您可以从height中删除#chartlegenddiv。还要在height上将[max-height][1]替换为#chartlegendwrapper。

没有高度与height: auto相同。

From MDN：

浏览器将计算并选择指定元素的高度。

如何达到div块高度的动态计算？

1 个答案: