html - 设置div 100%的窗口内容不会溢出

Question

我正在尝试将我的页面布局设置为占据 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%;
}

我的东西在这里工作，但我的 .post-wrapper 容器仍然不是 100% 高度:http://jsfiddle.net/1re4vLq4/10/

但是，如果页面上有很多内容，上面的示例确实有效:http://jsfiddle.net/1re4vLq4/9/ (注意:这个和上面的例子都使用了min-height)

然后我通过使用 height 而不是 min-height 将整个页面(包括 .post-wrapper)设置为 100% 高度: http://jsfiddle.net/9m1krxuv/4/

更改的 CSS:

.container { height: 100%; }

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

但是，问题是当页面上有很多内容时，它会溢出到页脚(您可以通过缩小 JSFiddle 中的结果 Pane 来查看):http://jsfiddle.net/1re4vLq4/8/事实并非如此(我也不想使用 overflow: hidden 隐藏文本)。

关于如何解决这个问题有什么建议或想法吗？我正在寻找至少 100% 高度的整个页面，包括 .post-wrapper(这是具有白色背景的右栏)。

Answer 1

如果您有一个“全尺寸”容器，您希望始终匹配视口(viewport)的高度 - 您最好不要添加会溢出(超出)该 div 的内容，因为你基本上打败了目的。

简短回答:从 .container CSS 规则中删除 height: 100%;。

我创建了一个基本的 Fiddle 示例，结合了全视口(viewport)高度 div 和仅包含大量内容的 div。

HTML:

 <div class="full-div red height-full">
        <!-- Full sized div. Content should fit within the viewport -->
    </div>
    <div class="full-div blue">
        <div class="inner-div">
            <!-- Add long lorem ipsum here. -->
            <!-- Notice that the parent div does not contain the height-full class -->
        </div>
    </div>
    <div class="full-div green height-full">
        <!-- This div will get "pushed down"only because the div above is NOT height 100% -->
    </div>

CSS:

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

.full-div { overflow: auto; }

.height-full { height: 100%; }

.inner-div { width: 90%; background-color: white; margin: 0 auto; }
.inner-div span { text-align: center; }

此处演示:http://jsfiddle.net/175mrgzt/

最终，当您将 DIV 设置为 100% 时 - 它应该是视口(viewport)(浏览器的图形查看区域)的 100%。一旦您添加了扩展的内容，您实际上将 超过 100% - 在这种情况下，您最好删除设置的高度，让 HTML 为您进行调整。