我正在使用 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 中使用最小高度，但它不起作用。
另请注意，#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 属性。
我该怎么办？还有其他选择可以实现这种效果吗？
谢谢!
最佳答案
我个人不会为此使用 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 ?>标签
希望对你有帮助
关于css - 最小高度不适用于计算功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25582942/