0

我正在开发一个 Joomla 2.5 模板，并具有三个顶部、容器和页脚。由于我在将“容器”设置为最小高度：100% 时遇到了很多问题，所以我依靠 jquery。我正在使用的代码工作正常，除了在需要滚动白色透明度的页面上覆盖初始视图下方的内容（所以从滚动条向下的所有内容。）示例可以在http://development.aycdesign 查看。净/皮肤/治疗/它的作品

这是代码

第 1 部分：index.php

<?php                               
defined('_JEXEC') or die;
JHTML::_('behavior.framework', true);
$app = JFactory::getApplication(); 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="../<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
//Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

function sizeContent() 
{
    var contentHeight = $("#container").height();
    var newHeight = $("html").height() - $("#top").height() - $("#footer").height();
    if (contentHeight < newHeight)
    {
        $("#container").css("height", newHeight + "px");
    }
}
</script>
</head>

<html>
<body>
<?php if($this->countModules('top')) : ?>
    <div  id="top">
        <jdoc:include type="modules" name="top" style="none"/>
    </div>
<?php endif; ?>
<?php if($this->countModules('mnav')) : ?>
    <div id="mnav">
        <jdoc:include type="modules" name="mnav" style="none"/>
    </div>
<?php endif; ?>
    <div id="container">
        <jdoc:include type="component" />
    </div>
<?php if($this->countModules('footer')) : ?>
    <div id="footer">
        <jdoc:include type="modules" name="footer" style="none"/>
    </div>
<?php endif; ?>

</body>
</html>

第 2 部分：default.css

/* ******************************************************************** */ 
/* Wire Frame                                                           */
/* ******************************************************************** */
html,body,div,span,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,label,input,textarea,p,th,td {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
    background: rgba(0,0,0,.5);
    color: #FFF;
    text-align: center;
    font-family: arial narrow, sans-serif;
    font-size: .9em;
    line-height: 1.35;
    letter-spacing: 1.75px
}

#top {
    background: rgb(0,0,0);
    color: rgb(255,255,255);
}

#top .custom {
    text-align: right;
    margin: 0 auto;
    width: 80%;
    max-width: 1280px;
    padding: .5em 0 .5em 0;
}

#container {
    background: rgba(0,0,0,.3);
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    max-width: 1280px;
}

#footer {
    background: rgb(0,0,0);
    color: rgb(255,255,255);
}

#footer .custom {
    text-align: right;
    margin: 0 auto;
    width: 80%;
    max-width: 1280px;
    padding: .5em 0 .5em 0;
}

/* ******************************************************************** */ 
/* HTML                                                                 */
/* ******************************************************************** */
a, a:visited, a:hover {
    color: #cf3f57;
    text-decoration: underline;
}

a img {
    border: none;
}

li {
    margin-left: 0;
    list-style-position: inside;
}

h1, h2, h3 {
    color: #cf3f57;
    text-transform: uppercase;    
    margin-bottom: 5px;
    letter-spacing: -1px;
    line-height: 1.15em;
}

fieldset
{
     border: none;
}

input {
    padding: 5px;
    margin: 10px 10px 10px 0;
    border: none;
}

input.button {
    padding: 5px;
    border: none;
    background: #252525;
    color: #AEAEAE;
}

.search label {
    display: none;
}

/* ******************************************************************** */ 
/* Joomla Elements                                                      */
/* ******************************************************************** */
.readmore { 
    color: #000;
    background: url('../images/read_more.png') no-repeat;
    margin-top: 10px;
    padding: 5px 0 5px 10px;
}

.readmore a{
    color:  #000;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

.blog-featured h1,
.item-page h1 {
    display: none;
}

ul.actions li {
    list-style: none;
    display: inline;
    padding: 5px;
}

.item.column-1, .item.column-2, .item.column-3 {
    padding: 10px;
}

.archive,
.userdata,
.search,
.item-page,
.items-leading, 
.item.column-1, 
.item.column-2, 
.item.column-3 {
    padding: 12em 1em 1em 1em;
}

.items-more {
    margin-left: 20px;
}

.items-more ol {
    padding-bottom: 10px;
}

.items-more li {
    display: inline;
    padding-right:  5px;

}

.pagination {
    margin-left: 20px;
    margin-bottom: 10px;
}

.pagination-start {
    margin-left: -10px;
}

.pagination li{
    display: inline;
    padding: 0 10px;
}

.counter {
    margin-bottom: 5px;
}

.archive-items,
.moduletable li {
    margin-bottom: 5px;
    list-style: none;
}

.moduletable {
    padding: 10px;
}

.article-info {
    padding: 10px;    
}

.archive h2 {
    display: none;
}

.intro,
.filters {
    margin-bottom: 10px;
}

/* ******************************************************************** */ 
/* Joomla Blog Elements                                                 */
/* ******************************************************************** */
.cols-1 {
display: block;
float: none !important;
margin: 0 !important;
}

.cols-2 .column-1 {
float: left;
width: 46%;
}

.cols-2 .column-2 {
float: right;
margin: 0;
width: 46%;
}

.cols-3 .column-1 {
float: left;
margin-right: 4%;
width: 27%;
}

.cols-3 .column-2 {
float: left;
margin-left: 0;
width: 27%;
}

.cols-3 .column-3 {
float: right;
width: 27%;
}

.items-row {
margin-bottom: 0px !important;
overflow: visible;
}

.column-1, .column-2, .column-3 {
}

.column-2 {
margin-left: 40%;
width: 55%;
}

.column-3 {
width: 30%;
}

.blog-more {
padding: 10px 5px;
}


/* ******************************************************************** */ 
/* Main Menu                                                            */
/* ******************************************************************** */
#mnav .moduletable {
    margin: 0;
    padding: 0;
}

#mnav {
    width: 100%;
    padding: .5em 0 .5em 0;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 3em;
    z-index: 1000;
}

#mnav ul {
    width: 80%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

#mnav ul li:first-child {
    margin: 0;
    padding: 0;
}

#mnav ul li {
    margin-top: 3.5em;
    list-style: none;
    float: left;
    position: relative;
}

#mnav ul li a {
    display: block;
    padding: 0 1em;
    color: rgb(17, 17, 20);
    font-size: 1.25em;
    text-decoration: none;
    text-transform: uppercase;
}

#mnav ul li a:hover {
    color: rgb(207,63,87);
}


#mnav ul li ul {
    position: absolute;
    left: -1999em;
}

#mnav ul li:hover ul,
#menu ul li.parent ul {
    left: 0;
}

#mnav ul li ul li {
    width: 20em;
    margin: 0;
}

#mnav ul li:hover ul li {
    background: none;
}

#mnav ul li:hover ul li a,
#mnav ul li ul li a {
    margin-top: .1em;
    margin-bottom: .1em;
    background: rgba(255,255,255,0.5);
    padding: .7em 1em .7em 1em;
    font-size: .8em;
}

#mnav ul li ul li a:hover,
#mnav ul li.active ul li a:hover {
    color: rgb(207,63,87);
}
4

1 回答 1

0

首先，删除那个 jQuery 脚本。

然后从 default.css 中删除 - html, body {

height: auto !important;

然后添加到#outer-container

margin-bottom: -33px;
margin-top: -33px;
height: 100%;
min-height:100%;

并为#inner-container 提供更多（+2em）padding-top

于 2012-12-07T23:05:50.553 回答