Question

我正在研究Joomla 2.5模板@ http://development.aycdesign.net/skin，并且已经坚持了几天，谷歌在这个问题上一直不是朋友。我想要完成的是拥有一个可变大小的标题，可变大小的页脚，并始终使内容容器至少为浏览器窗口大小的100％。我已经尝试了太阳下的一切，并得到两个问题。

我的内容所在的容器不会扩展到其容器的100％高度。
在必须滚动的页面上，内容的一部分正在剪切到页脚。

对此的任何建议都将非常感谢，以便我能够解决这个问题并继续前进！

<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;
}

Answer 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设置为absolute或fixed，则可以同时使用top和bottom将其拉伸为那些距离容器顶部和底部的距离。同样可以用于left和right。

Example here

Answer 2

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

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

我将演示两种方法。一个用于现代浏览器，另一个用于支持传统浏览器（ie7，ie8，firefox＆lt; 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;
}

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

Answer 3

我最终使用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);

css - min-height：100％为儿童容器，不想工作？

3 个答案: