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）

然后，我使用.post-wrapper而不是height将整个页面（包括min-height）设置为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

如果你有一个“全尺寸”容器，你想要始终匹配视口的高度 - 你最好不要添加溢出（超越）div的内容，因为你基本上是在挫败目的。

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

我创建了一个基本的小提琴示例，它结合了全视口高度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; }

DEMO：http://jsfiddle.net/175mrgzt/

最终，当您将DIV设置为100％时 - 预期它将是视口的100％（浏览器的图形查看区域）。一旦你添加的内容扩展到你实际上超过 100％ - 在这种情况下，你也可以删除设置的高度，让HTML为你做出调整。

设置div 100％的窗口没有内容溢出

1 个答案: