设置 div window 的 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 中的结果窗格来看到这一点）：http://jsfiddle.net/1re4vLq4/8/ 哪个应该事实并非如此（我也不想使用 overflow: hidden 隐藏文本）。

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

Answer 1

如果您有一个 "full-sized" 容器，您希望它始终与视口的高度相匹配 - 您最好不要添加会溢出的内容（转到超越）div，因为你基本上违背了目的。

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

我创建了一个基本的 Fiddle 示例，它结合了全视口高度 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% - 它预计为视口（浏览器的图形查看区域）的 100%。一旦您添加了扩展的内容，您实际上将超过 100% - 在这种情况下，您最好删除设置的高度，然后让 HTML 进行调整给你。

设置 div window 的 100% 而内容不会溢出

Setting div 100% of window without content overflowing

html

css

layout

height