Question

我正在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推到页面底部时将其压缩到页面底部）。我尝试使用calc函数在css中使用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属性。

我该怎么办？还有其他任何选择来实现这种效果吗？

谢谢！

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

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

希望这有帮助

最小高度不适用于calc函数

1 个答案: