【发布时间】：2013-04-07 15:42:49
【问题描述】：
我在 Joomla Here's the site 中使用自定义网格响应模板设置了一个站点。目前我有一个非常基本的布局......页眉 - 部分 - 旁边 - 页脚。
然而，页脚似乎上升到了 side 模块中，而不是像 section 组件那样位于其下方。我已经尝试了每一个粘性页脚解决方案，但是，我失败了！我在这里错过了一些非常直接的浮动和清除吗？还是页脚是一个模块？这是代码......应该相关的位！
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 中的样式会覆盖它。希望有人能帮忙！
我添加了一些背景颜色，以便更容易看到旁边的模块与页脚行为不端...
【问题讨论】：
-
link 此页面似乎有问题，因为内容较少，例如旁边的内容比部分多。
-
是的，我明白了。您的旁白内容具有绝对定位，并且不符合文档流。为什么不使用float属性来获取这个布局而不是绝对定位呢？
-
嗨 - 我尝试浮动部分和旁边并给页脚一个
clear: both;但似乎我没有做任何工作。旁边总是与页脚重叠... -
@Miljan 你在旁边关于它绝对定位的注释是正确的，我一开始没有看到它，但它是我的响应式样式表，它包含它。玩弄这个制作了其他元素正确播放并与 Jamie Patersons cmets 在添加宽度时解决它！
-
实际上，我的旁边现在没有保持它在页面顶部的位置。我需要将它移到右侧和顶部，但是不使用绝对定位来保持响应流......我真的被卡住并且盯着这个太久了！有什么想法吗？