我正在为 joomla 2.5.6 编写自己的模板。我不确定这个问题是与 Joomla 相关还是与 css 相关。
模板很简单，左边是侧边栏，右边是内容，还有一个页脚。现在当内容很短并且侧边栏上有多个模块时，模块会与页脚重叠。
看起来像这样:
http://imageshack.us/photo/my-images/269/screenshotmdph.jpg/
index.php 中的 html 如下所示:
<body>
<div class="container_6">
<div class="grid_6 header">
<a href="<?php echo $this->baseurl ?>" title=""><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/assets/images/logo.png" alt="home" id="logo"/></a>
<jdoc:include type="modules" name="menu" />
</div>
</div>
<div class="container_6">
<div class="grid_6 head_logo">
<jdoc:include type="modules" name="header_logo" />
<div class="left_menu">
<div class="left_menu_content">
<jdoc:include type="modules" name="left_menu" style="xhtml" />
</div>
</div>
<div class="right_module">
<jdoc:include type="modules" name="right" />
</div>
</div>
</div>
<div class="container_6">
<div class="grid_6">
<div class="content">
<div class="content_holder">
<!-- beginn content -->
<div class="container_6">
<div class="content_component">
<jdoc:include type="modules" name="breadcrumb" />
<jdoc:include type="component" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="container_6">
<div class="grid_6">
<div class="footer">
</div>
</div>
</div>
我用的是960-grid系统，上面有明确的类，但其他类在这里定义:
.header {
background: url('../images/top.png') no-repeat;
height:93px;
width:100%;
}
.head_logo {
background: url('../images/shadow.png') repeat-y;
padding-right:10px;
padding-left:12px;
z-index:1;
position:absolute;
}
.left_menu {
background: url('../images/menuBg.png') no-repeat;
width:284px;
min-height:611px;
top:300px;
z-index:2;
position:absolute;
}
.right_module {
width:180px;
height:40px;
padding:10px;
background-color:#e9e9e9;
top:300px;
left:730px;
z-index:3;
position:absolute;
}
.content {
background: url('../images/shadow.png') repeat-y;
min-height:500px;
}
.content_holder {
background-color:#e9e9e9;
width:960px;
margin-left: auto;
margin-right: auto;
min-height:500px;
}
.content_component {
width:666px;
padding:5px 5px 5px 284px;
margin:0 5px;
}
#logo {
margin:15px 0 0 25px;
float:left;
}
.footer{
background: url('../images/bottom.png') no-repeat;
width:100%;
height:92px;
}
我迷失了这个，因为它应该工作，因为页脚上方的清算类，但它没有..不幸的是我没有在线示例，它都是本地的
有人知道我如何找到错误吗？非常感谢
附加信息:
对不起，我忘记了
<div class="clear"></div>
在 grid.css 中定义，看起来像这样:
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
我也编辑了问题标题，抱歉错了
加法!!
我想添加问题的屏幕截图。请看这里:
http://www.bilder-hochladen.net/files/jegt-i-6f49-jpg.html
你看，.left-menu 是用 absolute 定位的，并从 .head-logo 类开始。 .left-menu 不应放在紫色页脚内。
如何让内容 div 与左侧菜单的高度相等？
最佳答案
使用 Clear:both 而不是 clear:all 这不是 MHO 中的样式定义。
关于css - 尽管样式为 ="clear:both"，但 div 重叠页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12400794/