html - 在内容容器上设置最小高度

Question

有一个案例我没有看到解决方案。这是我的问题:

我有一个包含三个部分(页眉、部分和页脚)的页面，页脚必须始终齐平到底部。 section 部分应占据页眉和页脚之间的所有可用位置，但必须具有根据页面不同的最小高度(我将在 CSS 上手动设置)。

当达到最小高度时，整个页面上的滚动应该可用。

这是我用来设置页眉、部分和页脚占据所有可用位置的代码示例。

CSS

body {
    margin: 0
}
header, section, footer {
    left:0;
    right:0;
    overflow: hidden;
    position: absolute;
}
header {
    height: 70px;
    top: 0;
    background-color: green;
}
section {
    top: 70px;
    bottom: 195px;
    background-color: gray;
    min-height:300px;
}
article {
    overflow: hidden;
    background-color:lightyellow;
}
.news {
    position: absolute;
    bottom: -30px;
    width: 100%;
    background-color: lime;
}
footer {
    height: 195px;
    bottom: 0;
    background-color: pink;
}

HTML

<header>
    <div class="container">
        <h2>My header</h2>
    </div>
</header> 
<section>
    <article>
        <div class="news">
            <div class="row-fluid">
                <a href="#">UP</a>
            </div>
            <div class="row-fluid">
                <div class="container">
                    <div class="span6">News 1</div>
                    <div class="span6">News 2</div>
                </div>
            </div>
        </div>
    </article>
</section> 
<footer>
    <div class="container">
    My footer
</div>
</footer>​

jsfiddle 可用于示例:http://jsfiddle.net/Nk6uY/

编辑

我如何在我的部分上添加一个最小高度，当它达到时我会在我的窗口上看到一个滚动条？

编辑2

我将添加有关我的问题的更多信息。首先，section 标签中的大部分内容都将设置为绝对值。并隐藏一些并出现在操作中(主要是 javascript)。出于这个原因，我知道对于每个部分，如果有人点击链接，我需要看到我的所有内容的最小高度。

在我的示例中，div 新闻是隐藏的，当您单击它时，它至少需要 360 像素才能显示。但是，如果我的窗口比这个小，我就不会在窗口上滚动，并且我的所有内容都被页脚覆盖。

Answer 1

您只能通过 javascript 实现此目的 - 您需要提供页眉、部分和页脚 ID，然后使用如下内容:

function ResizeBody() {
    var header = document.getElementById("Header");
    var section = document.getElementById("Section");
    var footer = document.getElementById("Footer");

    var height = GetBodyHeight() - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections;
    if (height > 0) {
         body.style.height = height + "px";
    }
}

function GetBodyHeight() {
    if (window.innerHeight > 0) {
        return window.innerHeight;
    }
    else {
        return document.documentElement.clientHeight;
    }
}

window.onresize = function () {
    ResizeBody();
};


$(document).ready(function () {
    ResizeBody();
});

更新

抱歉，我想我读错了问题 - 您是希望该部分增长到屏幕大小，还是您手动设置它，如果内容太多有滚动条？

在这种情况下，您应该只设置该部分的高度(而不是最小高度)而不是 overflow:hidden 使用 overflow:scroll;