Question

我使用自定义网格响应模板在Joomla Here's the site中设置了一个网站。目前我有一个非常基本的布局......标题 - 部分 - 旁边 - 页脚。

然而，页脚似乎上升到旁边模块中，而不是像部分组件一样位于下面。我已经尝试过每一个粘性页脚解决方案，但唉，我被打败了！我错过了一些非常直接的漂浮物并在这里清除了吗？或者是页脚是一个模块？这是代码......应该相关的位！

的index.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>

的style.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中的样式覆盖了它。希望有人可以帮忙！

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

Answer 1

html标记可以轻微地进行跳汰。如果你使用浮动元素，那么所有主要容器应该真正浮动并且可能添加一些宽度以确保IE7起球。如果你没有使用浮点数，那么明确的修复应该与/和/或css一起用于content :: after {display：block;内容：””;等等，以清除元素。

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

网站页脚与<aside>内容</aside>冲突

1 个答案: