css - 将 DIV 的高度调整为页面上有多少内容

Question

我想在单击菜单中的链接时使我网站上的内容变暗。标识和菜单不得变暗。jsFiddle 上的这个例子正好说明了我的意思。dim-pageDIV 应根据特定页面上的内容量调整其高度。

例如，在 jsFiddle 页面上，我有 5 行文本。当我单击内容中的链接时，dim-page它将可见并且如果内容只有一半变暗，因为它具有固定的高度。如何根据页面上有多少内容使这个高度动态化？

Answer 1

您可以在获取内容 div 的高度后设置昏暗高度

$(document).ready(function() {
    $('#link').click(function() {
        var contentHeight = $(".content").outerHeight();
        $('.dim-page').show().height(contentHeight);
    });
});