0

我在 Joomla 中设置了一个站点，这是使用自定义网格响应模板的站点。目前我有一个非常基本的布局......页眉 - 部分 - 旁边 - 页脚。

然而，页脚似乎上升到了旁边的模块中，而不是像使用 section 组件那样位于其下方。我已经尝试了所有粘性页脚解决方案，但可惜我失败了！我在这里错过了一些非常直接的浮动和清除吗？还是页脚是一个模块？这是代码......应该相关的位！

索引.php

</head>

<body>

<?php  if($this->countModules('hidden')) : ?>
<div id="hidden">
<jdoc:include type="modules" name="hidden"  style="xhtml" />
</div>
<?php endif; ?>

<header>
<jdoc:include type="modules" name="header" style="xhtml" />
</header>
<nav>
  <jdoc:include type="modules" name="nav" style="xhtml" />
</nav>

<section>
    <jdoc:include type="component" style="xhtml" />
</section> 


<?php  if($this->countModules('aside')) : ?>
<aside>
  <jdoc:include type="modules" name="aside" style="xhtml" />
</aside>
<?php endif; ?>

<footer>
    <jdoc:include type="modules" name="footer"  style="xhtml" />
</footer>

样式.css

html {
    min-height: 100%;
    font-family:'OpenSansRegular';
    overflow-x: hidden;
}

body {
    overflow: hidden; /* Useful for mobile window width */
}


header {
    -webkit-background-size:    cover;
    -moz-background-size:       cover;
    -o-background-size:         cover;
    background-size:            cover;
    border-bottom: 4px solid #4B77B1;
}

section {
    background: white;
    color: #333;
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;
}

aside {
    right: 0;
    color: #333;
}


footer {
    height: 200px;
    background: #B3BCC6;
    border-top: 4px solid #4B77B1;
    margin-bottom: 1em;
    text-align: center;
}

还有一个响应式样式表，但上面显示的主 css 中的样式会覆盖它。希望有人能帮忙！

我添加了一些背景颜色，以便更容易看到旁边的模块与页脚行为不端......

4

1 回答 1

1

html 标记可以做一些轻微的跳动。如果您使用的是浮动元素，那么所有主容器都应该是浮动的，并且可能会添加一些宽度以确保 IE7 能够正常运行。如果您不使用浮点数，则应使用 / 和 / 或 css 对内容进行明确的修复::after{display:block; 内容：””; 等清除元素。

我会建议更多的父容器包含左列和右列，然后清除 - 这会将页脚向下推 - 考虑为一些较旧的浏览器添加宽度或包含在特定的 @import url 中。

于 2013-04-15T14:03:08.393 回答