Html 设置窗口100%的div而不出现内容溢出

我正试图将我的页面布局设置为占据100%的屏幕，但遇到了内容溢出到页脚的问题

以下是第一个示例的代码：

HTML：

<div class="container page-container">
    <div class="page-leftSidebar">
        <div class="sidebar" role="complementary">
            <h4>Widget Title</h4>
                    </div>

        <main class="post-wrapper" role="main">
            <section class="entry-content">
                <p>This makes the entire page 100% height, but <code>.post-wrapper</code> is not for some reason.</p>
            </section>
        </main>
    </div>
</div>

<footer class="siteFooter">
    <p>Copyright 2015 Me.</p>
</footer>

CSS:

/* Generic */
html,
body { height: 100%; }

body {
    background-color: #f3f3f3;
    margin: 0; 
    padding: 0;
}


/* Containers */
.container {
    margin: 0 auto;
    width: 90%;
}

.page-container { min-height: 100%; }


/* Page Content */
.post-wrapper {
    background-color: #fff;
    min-height: 100%;
}

/* This is the row that will hold our two columns (sidebar and content) */
.page-leftSidebar {
    width: 100%;
    min-height: 100%;
}

.page-leftSidebar:after {
    clear: both;
    content:" ";
    display: table;
}

.page-leftSidebar .sidebar { -webkit-background-clip: padding-box; }

@media (min-width: 60em) {
    /* Page container */
    .page-leftSidebar .post-wrapper {
        -webkit-background-clip: padding-box;
        min-height: 100%;
    }

    /* Left Sidebar */
    .page-leftSidebar .sidebar {
        float: left;
        width: 19.25%;
    }

    /* Right Content */
    .page-leftSidebar .post-wrapper {
        float: left;
        margin-left: 2%;
        width: 78.75%;
    }
}


/* Site Footer */
.siteFooter {
    background-color: #2b303b;
    color: #555555;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 50px;
}


/* FULL PAGE HEIGHT */
.container { min-height: 100%; }

.post-wrapper,
.page-leftSidebar,
.sidebar {
    display: block;
    position: relative;
    height: 100%;
}

.container { height: 100%; }

.post-wrapper,
.page-leftSidebar,
.sidebar {
    display: block;
    position: relative;
    height: 100%;
}

我在这里工作正常，但我的

.post wrapper

容器仍然不是100%高：

但是，如果页面上有大量内容，上面的示例确实有效：（注意：此示例和上面的示例都使用

最小高度

）

然后我通过使用

高度

而不是

最小高度

，将整个页面（包括

.post wrapper

）设置为100%高度：

更改的CSS:

/* Generic */
html,
body { height: 100%; }

body {
    background-color: #f3f3f3;
    margin: 0; 
    padding: 0;
}


/* Containers */
.container {
    margin: 0 auto;
    width: 90%;
}

.page-container { min-height: 100%; }


/* Page Content */
.post-wrapper {
    background-color: #fff;
    min-height: 100%;
}

/* This is the row that will hold our two columns (sidebar and content) */
.page-leftSidebar {
    width: 100%;
    min-height: 100%;
}

.page-leftSidebar:after {
    clear: both;
    content:" ";
    display: table;
}

.page-leftSidebar .sidebar { -webkit-background-clip: padding-box; }

@media (min-width: 60em) {
    /* Page container */
    .page-leftSidebar .post-wrapper {
        -webkit-background-clip: padding-box;
        min-height: 100%;
    }

    /* Left Sidebar */
    .page-leftSidebar .sidebar {
        float: left;
        width: 19.25%;
    }

    /* Right Content */
    .page-leftSidebar .post-wrapper {
        float: left;
        margin-left: 2%;
        width: 78.75%;
    }
}


/* Site Footer */
.siteFooter {
    background-color: #2b303b;
    color: #555555;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 50px;
}


/* FULL PAGE HEIGHT */
.container { min-height: 100%; }

.post-wrapper,
.page-leftSidebar,
.sidebar {
    display: block;
    position: relative;
    height: 100%;
}

.container { height: 100%; }

.post-wrapper,
.page-leftSidebar,
.sidebar {
    display: block;
    position: relative;
    height: 100%;
}

但是，问题是当页面上有很多内容时，它会溢出到页脚上（您可以通过缩小JSFiddle中的结果窗格看到这一点）：这不应该是这样的（我也不想使用

溢出：隐藏
）来隐藏文本）

关于如何着手解决这个问题，有什么建议或想法吗？我希望整个页面的高度至少为100%，包括
.post wrapper
（右栏为白色背景）
 如果您有一个“全尺寸”容器，您希望它始终与视口的高度相匹配，那么最好不要添加会溢出（超出）该div的内容，因为这样做基本上是不符合目的的

简短回答：删除
高度：100%从
.container
CSS规则

我创建了一个基本的小提琴示例，它结合了全视口高度div和只包含大量内容的div

HTML:

此处演示：

最终，当您将DIV设置为100%时，它应该是视口的100%（浏览器的图形查看区域）。一旦您添加了扩展到100%以上的内容，那么您最好删除设置的高度，让HTML为您进行调整。
如果JSFIDLE崩溃，会发生什么？此问题将被废弃，因为您没有在此处发布代码。这意味着你无法帮助其他人解决与你相同的问题。公平地说，我添加了代码示例。