1

我现在正在开发一个 Joomla 2.5 模板 @ http://development.aycdesign.net/skin，并且已经坚持了好几天了，谷歌在这个问题上也不是朋友。我想要完成的是拥有一个可变大小的页眉、可变大小的页脚，并且始终让内容容器至少为浏览器窗口大小的 100%。我已经尝试了几乎所有在阳光下的东西，但遇到了两个问题。

  1. 我的内容所在的容器不会扩展到其容器的 100% 高度。
  2. 在必须滚动的页面上，部分内容被剪裁到页脚中。

对此的任何建议将不胜感激，以便我可以解决这个问题并继续前进！

<html>
<body>

<div id="wrapper">
        <div id="top">
            header
        </div>
        <div id="mnav">
            main menu
        </div>
        <div id="pagewidth">
                <div id="maincol">
                    content
                </div>
        </div>
        <div id="footer">
            footer
        </div>
</div>

</body>
</html>

....和CSS：

html,body {
    height:100%;
    background: rgb(138, 126, 102);
    color: #A5A56F;
    font-family: arial, sans-serif;
    font-size: .9em;
    line-height: 1.25;
}

/* ******************************************************************** */ 
/* Wireframe Elements                                                   */
/* ******************************************************************** */   
#wrapper {
    position: relative;
    height:auto !important;
    height:100%;
    min-height:100%;
} 

#top {
       background: rgb(0, 0, 0);
       width: 100%;
}

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

#pagewidth {
        width: 80%;
    min-height: 100%;
        background: rgba(54, 54, 54, 0.5);
    text-align: left; 
        margin: 0 auto;
    padding-bottom: 3em;
}


#maincol {

}

#footer {
    background: rgb(0, 0, 0);
        width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
}

#footer .custom {
    width: 80%;
    margin: 0 auto;
        color: #fff;
        text-align: right;
    padding: .5em 0 .5em 0;
}
4

3 回答 3

1

尝试将以下 CSS 添加到#pagewidth：

position: absolute;
top: 20px;
bottom: 5%; /* To keep the content from stretching past the footer */
left: 50%;
margin-left: -40%;

http://jsfiddle.net/H8sg8/

当您有一个position设置为absoluteor 或的元素时fixed，您可以同时使用top和bottom将其拉伸为分别距其容器顶部和底部的距离。同样可以用于left和right。

这里的例子

于 2012-11-30T15:54:02.437 回答
0

问题是您的子容器不知道它的父容器的高度，以便计算它自己的高度。值得庆幸的是，过去很多工作都在研究这个问题。

我喜欢这样设置我的页面，以获得带有粘性页脚的灵活页面。

我将演示两种方法来做到这一点。一种用于现代浏览器，另一种用于支持旧版浏览器（ie7、ie8、firefox < 17）

HTML 现代浏览器

<div class="page">
    <div class="page-header">
        <div class="container">
        </div>
    </div>
    <div class="container">
        <!--Main content goes here-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

旧版浏览器

<div class="page no-box">
    <div class="page-header">
        <div class="container">
        </div>
    </div>
    <div class="container">
        <!--Main content goes here-->
    </div>
    <div class="page-push">
    <!--Acts as a buffer against the footer-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    position: relative;
}

.page {
    min-height: 100%;
    position: relative;
    /* Same height as the footer*/
    margin-bottom: -150px;
    padding-bottom: 150px;
    /* These allow the box model to include padding and margin*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

    .page.no-box {
        padding-bottom: 0;
    }

.page-push, .page-footer {
    height: 150px;
}

.page-footer {
    /*make sure it sits on top*/
    position: relative;
    z-index: 1;
}

.container {
    margin: 0 auto;
    width: 80%;
    max-width: 1140px;
}

我在工作中经常使用这个系统，并基于它创建了一个响应式网格，您可以在这里查看。希望这一切对你有意义。

于 2012-11-30T16:07:03.620 回答
0

我最终使用JS来解决这个问题......

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

//Initial load of page
jQuery(window).load(sizeContent); 
//Every resize of window
jQuery(window).resize(sizeContent);
于 2014-02-13T20:58:46.620 回答