最小高度不适用于 calc 函数答案

【问题标题】：Min-height doesn't work with calc function最小高度不适用于 calc 函数
【发布时间】：2014-08-30 23:11:37
【问题描述】：

我正在使用 Joomla 3.x 构建网站。我的 index.php 看起来像这样：

<body>
<div id="wrapper">
    <div id="inner_wrapper">
        <div id="header"></div>
        <div id="content" class="<?php echo $active->alias; ?>">
            <div id="content_inside">
                <div id="user1"></div>
                <div id="user2"></div>
                <div id="component"></div>
                <div id="user3"></div>
                <div id="user4"></div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</div>

因此，#header 和 #footer 具有固定高度，而 #content 则没有。我试图让#component 填充剩余的可用空间（或者当没有足够的内容将其向下推时将#footer 向下推到页面底部）。我在 css 中使用 calc 函数尝试了 min-height ，但它不起作用。

另外，请注意#user1、#user2 和#user3 仅在主页上使用，不会显示在其他页面上。 #component 的高度固定在首页。

我当前的 CSS 是：

body {background-color:#FAFAFA; margin: 0; padding:0; min-height:100%;}
html {min-height:100%;}
#wrapper {min-height:100%;}
#inner_wrapper {min-height:100%;}
#header {background-color: #E0E0E0; margin:0 0 0 0; height:90px;}
#user4 {background-color: #E1E1E1; margin: 0; /*height: 126px;  ----> not really here, but is generated by modules and is always like this*/}
div#footer {background-color: #151C1B; margin: 0 0 0 0; width: 100%; /*height: 430px;  ----> not really here, but is generated by the module and is always like this*/}

所以，我将此代码应用于#component：

#component {
    min-height: -moz-calc(100% - 646px);
    min-height: -webkit-calc(100% - 646px);
    min-height: calc(100% - 646px);
}

它不起作用。另外，我检查了一下，没有任何东西覆盖 min-height 属性。

我该怎么办？还有其他选择可以达到这种效果吗？

谢谢！

【问题讨论】：

我的猜测是，您的 calc 函数中的 100% 的实际含义尚不清楚，因为祖先元素没有设置高度。
嗯，是的。你是对的。我遍历了所有祖先元素并设置了高度或在需要的地方计算它，但它不起作用。谢谢！

标签： css joomla footer

【解决方案1】：

我个人不会为此使用 CSS33，因为您必须手动定义页眉和页脚的高度，然后才能设置内容的高度。是的，这是可行的，但它不是一种动态的方式。

为此，我将使用随 Joomla 软件包提供的 jQuery。要导入 jQuery，只需在 index.php 中包含以下内容：

JHtml::_('jquery.framework');

然后，您可以使用以下 jQuery：

$doc = JFactory::getDocument();
$js = "
    jQuery(document).ready(function($){

        var viewportHeight  = $(window).height();     /* Get viewport height */
        var headerHeight    = $('#header').height();  /* Get header height */
        var footerHeight    = $('#footer').height();  /* Get footer height */

        /* Calculate the height */
        var calculate = viewportHeight - parseInt(headerHeight + footerHeight);

        /* Apply the calculate height to the component element */
        $('#component').height(calculate);

    });
";
$doc->addScriptDeclaration($js);

以上所有代码都需要添加到您的 index.php 顶部 <?php ?> 标签内

希望对你有帮助

【讨论】：